参考文献：Vue中的路由

一、路由理解：

• 一个路由就是一组映射关系（key，value），多个路由需要路由器（router）进行管理。
• 其中key是路径，value是组件。
• 作用：设定访问路径，并将路径和组件映射起来（就是用于局部刷新页面，不需要请求服务器来切换页面）

二、路由管理器理解：

• Vue-router是路由管理插件。主要用于管理URL，实现URL和组件的对应，及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单。
• 单页面应用（single page web application, SPA）的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会重新加载整个页面，只会更新某个指定的容器中的内容（局部刷新机制）。
• vue-router可以实现当用户单击页面中的超链接A时，页面显示内容（组件）A；单击超链接B时，页面显示内容（组件）B。（局部刷新机制）
• 举个例子：
  
  
  我们可以看到页面是局部刷新，导航栏并不会随着页面的切换而变化。

三、路由的使用：

• App.vue页面：

• 组件StaffList.vue：

• 组件StudentList.vue：

• index.js：

import Vue from 'vue';
//导入路由管理器插件
import VueRouter from 'vue-router';
//导入StaffList.vue
import StaffList from '../views/StaffList';
//导入StudentList.vue
import StudentList from '../views/StudentList';
//使用路由管理器插件
Vue.use(VueRouter)
const routes = [//路由数组{ //单条路由path:'/student', //指定访问哪个URL会显示该组件name: 'StudentList',//路由名字component: StudentList },//路由一，绑定key-value，实现访问/student会显示组件StudentList { path:'/staff', name: 'StaffList',//路由名字component: StaffList}//路由二，绑定key-value，实现访问/staff会显示组件StaffList/*每条路由记录为一个对象。name：指定路由名字，用于命名路由path：指定url路径，即访问哪个url时会显示component属性指定的组件component：访问这条路由时要显示的组件*/
]
const router = new VueRouter({//路由管理器，用来管理路由mode: 'history',//history模式下URL没有#，更加符合业务需要routes:routes,//设置该路由管理器负责管理的路由数组base: process.env.BASE_URL//base代表应用的基路径，process.env.BASE_URL是指从从环境进程中根据运行环境获取的api的base_url
})
export default router;//将路由管理对象作为index.js的默认导出对象,作用：如果import './router/index' 的话会获得该router对象

• main.js：

//导入vue
import Vue from 'vue'
import App from './App.vue'//导入我们创建的router，这个router来自index.js
import router from './router/index'
//使用router
Vue.use(router)
//创建Vue实例，并传入路由管理器对象
const app = new Vue({router: router,render: h => h(App)
}).$mount('#app')

• 效果：
  首先进入App.vue界面，该界面有两个router-link和一个router-view
  
  点击员工信息列表router-link，会跳转到对应URL，然后浏览器根据URL查找路由数组获得该URL对应的组件，渲染到router-view。注意此时虽然URL变了，但是布局还是App.vue界面的布局：两个router-link和一个router-view。
  
  点击学生信息列表也是一样的效果，router-view显示对应URL的组件信息，而不是将整个页面都渲染成router-view对应的组件信息。

四、嵌套路由：

• 多级路由用到了route的children属性，routes中的属性成为一级路由，一级路由中children属性中的路由称为二级路由，以此类推。
• 注意：除一级路由中路径要写斜杠/ 二级路由和多级路由中的路径不写斜杠/。
• 跳转多级路由时,to=“路由路径” 要写全!从一级路由开始写!(如: to=“/home/news”)
• 可以给路由配置name属性，传递参数的时候会用到，添加name属性后跳转就不用写全路径，可以直接写路由的name （:to=“{name:‘news’}”）

routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{    name:'news'path:'news', //此处一定不要写：/newscomponent:News},{name:'message'path:'message',//此处一定不要写：/messagecomponent:Message,children: [{        name:'msg'path: 'msgdata',component: Msgdata,}]}]

五、路由传参：

1.query传参：

URL格式：
/a/b?id=666&title=你好

路由路径传递数据：

	跳转1跳转2

路由接收数据并包装，传给组件：

routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{    name:'news'path:'news', //此处一定不要写：/newscomponent:News},{name:'message'path:'message',//此处一定不要写：/messagecomponent:Message,children: [{path: 'msgdata',component: Msgdata,//在这里使用$route.query接收一下传来的参数,然后包装一下再传给Msgdata组件props($route){return {id:$route.query.id,title:$route.query.title}}     }]}
]

组件接收包装后的数据：

2. params传参：

• 使用params传参时路由路径中需要配置占位符。

URL格式：
/a/b/666/你好 （其中’666’和’你好’是参数）

路由路径传递数据：

  	
跳转1 

跳转2

路由接收数据并包装，传给组件：

name: 'shownews',
// params 写法先在路径中占位
path: 'shownews/:id/:name',
component: ShowNews,
// props:true表示包装数据 props会接收所有params参数 以props的形式传递给ShowNews组件
props: true

组件接收包装后的数据：

六、编程式路由导航：

• 除了使用 router-link 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
• 在 Vue 实例内部，可以通过 $router 访问路由实例。因此想要导航到不同的 URL可以，调用 this.$router.push方法。

const userId = '123'
//不带参
this.$router.push({ path: '/home' })// -> /home
//1.params传参：
//方法一：字符串传参
this.$router.push({ path: `/user/${userId}` }) // -> /user/123
//方法二：对象传参
//注意，如果提供了path,params会被忽略，所以使用params对象传参时要用name属性而不是path
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123
//2.query传参：
//方法一：字符串传参：
this.$router.push({ path: '/register?plan=private')// -> /register?plan=private
//方法二：对象传参：
this.$router.push({ path: '/register', query: { plan: 'private' }})// -> /register?plan=private

七、响应路由参数变化：

• 当使用路由参数时，例如从 /user/foo 导航到 /user/bar（其中foo和bar都是参数），原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
• 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

  watch: {$route(to, from) {// 对路由变化作出响应...}}

八、路由守卫：

• 路由守卫的作用 ： 对路由进行权限管理，必须符合条件才能访问。

• 路由守卫有三种： 全局守卫、独享守卫、组件内守卫。

1.全局守卫：

在所有的路由发生改变前都执行 使用路由守卫就不能直接暴露路由实例，需要接收一下

然后调用里面的beforeEach((to,from,next)=>{})

有三个参数to：去哪个路径，from：从哪个路径里来，next：是个函数调用的时候next()放行

// 配置在实例对象外 初始化时调用，每次发生路由变化前调用router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则next() //放行}else{alert('暂无权限查看')// next({name:'guanyu'})}}else{next() //放行}})//全局后置守卫：初始化时执行、每次路由切换后执行router.afterEach((to,from)=>{console.log('afterEach',to,from)if(to.meta.title){ document.title = to.meta.title //修改网页的title}else{document.title = 'vue_test'}})

2.独享守卫：

放在需要进行权限设置的路由里面，参数语法和全局一样 当访问这个路径前才执行beforeEnter()

beforeEnter(to,from,next){console.log('beforeEnter',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暂无权限查看')// next({name:'guanyu'})}}else{next()}}

3.组件守卫：

放在组件里和methods，components同级别 。

必须是通过路由规则进入该组件才可以调用。
beforeRouteEnter（），beforeRouteLeave（）。

   //进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {},//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {}