vue-router小结

1.什么是vue-router

vue-router是vue.js官方给出的路由解决方案，只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换

2.vue-router的用法

先安装vue-router （npm i vue-router）
在新建router/index.js 文件,在文件内导入Vue和vue-router（新建的路径由自己决定）

// 导入Vue和VueRouter的包
// router/index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'// 调用Vue.use()函数，把VueRouter安装为Vue的插件
Vue.use(VueRouter)const Home = () => import("../home.vue");// 创建路由的实例对象
const router = new VueRouter({// routes是一个数组，定义"hash地址"与"组件"之间的关系routes:[// 重定向属性，当刚打开页面，并没有点击跳转时，则设置首页面渲染{path: '/',redirect: '/home'},{path: '/home',component: Home}]
})// 导出的目的是为了在main.js进行导入, 将路由实例对象挂载在 new Vue()里面
export default router

在组件中vue-router的用法

  // app.vue组件<template><div>// router-link来替代普通的a连接 to为组件路径<router-link to='/home'></router-link>// 只要在项目中安装和配置了vue-router，就可以使用router-view这个组件// 作用 : 占位符，表示渲染的内容的位置<router-view></router-view></div></template>

嵌套路由的使用

  import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)//懒加载，打包的时候会分离，使用的时候才会加载 可减小js体积const Home = () => import('Home.vue')const tab = () => import('Tab.vue')const router = new VueRouter({routes: [{path: '/home',component: Home,// 子路由的重定向redirec: '/home/tab',// 子路由children: [// 默认子路由 如果children中的path为空，则这条路由规则，就叫做默认子路由{path: 'tab', // 子路由路径不用加/component: Tab}]}]})export default router// app.vue组件<template><div>// 路径为子路径，点击后跳转到子路径<router-link to='/home/tab'></router-link>// 若使用的是默认子路由，则to后面 /tab可以省略<router-link to='/home'></router-link><router-view></router-view></div></template>

3.动态路由的使用

// 需求: 在Movie组件中，希望根据id的值，展示对应电影的详情信息// 这里path路径中有参数，可以开启props传参，是为了方便Movie组件拿到参数值
// 在对象中加入props:true
// 如果路径中没有参数，则开启props传参也没有意义
{path: '/movie/:id',component: Movie,props: true}// id的值会存在放Vue实例中的 $route.params.id中// Movie.vue
//则这里就可以直接拿到id的值
props: ['id']

命名路由

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const Home = { template: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }const router = new VueRouter({mode: 'history',base: __dirname,routes: [{ path: '/', name: 'home', component: Home },{ path: '/foo', name: 'foo', component: Foo },{ path: '/bar/:id', name: 'bar', component: Bar }]
})new Vue({router,template: `<div id="app"><h1>Named Routes</h1><p>Current route name: {{ $route.name }}</p><ul><li><router-link :to="{ name: 'home' }">home</router-link></li><li><router-link :to="{ name: 'foo' }">foo</router-link></li>// 若这里是path,则不可以写params，写了不会生效<li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li></ul><router-view class="view"></router-view></div>`
}).$mount('#app')

多个路由指向同一个组件时，组件内的生命周期钩子不会被调用了，这是因为组件被复用了，如以下代码都是指向Home组件

  const routes = [{path: '/home',component: Home},{path: '/about',component: Home}]// 使用watch则可以进行监听，对路由参数做出响应watch: {'$route'(to,from){console.log(from)}}// 也可以在组件内使用如下beforeRouteUpdate(to, from, next) {// react to route changes...// don't forget to call next()}

扩展:

a.在hash地址中，/后面的参数项,叫做’路径参数’,路由中路径参数放在params中

b.在hash地址中，?后面的参数项，叫做”查询参数”，路由中查询参数放在query中

c.在this.$route中，path只是路径部分，不包含查询参数,而fullPath则是完整路径

4.路由守卫

记住参数或查询的改变并不会触发进入/离开的导航守卫(这个是指组件内的beforeRouteEnter)。你可以通过观察 $route 对象(watch)来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

注意: 如果是全局守卫和组件内的beforeRouteUpdate和beforeRouteLeave在动态路由跳转时也会调用触发守卫

全局前置路由守卫

   // router/index.js// to是将要访问的路由的对象// from 是将要离开的路由的对象// next是一个函数,调用next() 表示放行,允许这次路由导航router.beforeEach((to,from,next) => {next();})// next函数的3中调用方式// 当前用户拥有后台主页的访问权限，直接放行 next();// 当前用户没有后台主页的访问权限,强制跳转登录页面 next('/login')// 当前用户没有后台主页的访问权限,不允许跳转到后台主页  next(false);

使用场景:使用前置路由守卫模拟登录(代码展示)

router.beforeEach((to, from, next) => {// 判断要跳转的页面是不是登录页，如果是的话，就直接同意跳转if (to.path === '/login') {return next();}// 如果不是，则判断浏览器里是否存储了token值，判断登录是否过期，如果不存在token或者过期//则强制跳转到登录页重新进行登录else if (!localStorage.getItem('token')) {return next('/login');}// 最后则是有token值，则让其正常跳转next();
})

以上则是一个模拟登录功能的简单实现，但以上功能还没有完善，只是大概结合全局前置路由守卫进行实现

全局后置钩子

// 不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {// ...
})