Vue-router之集成

在项目目录新建config文件夹，新建router.js文件（Vue Router入口文件）和routes.js文件（路由配置文件），推荐项目结构

安装Vue Router插件

npm install vue-router -S

在 routes.js文件 中配置路由，以下为路由配置基础示例

• 
  
  import Login from '../views/login/login.vue'
  
  
• 
  
  
  
  
• 
  
  export default [
  
  
• 
  
    {
  
  
• 
  
      path: '/login',
  
  
• 
  
      component: Login
  
  
• 
  
    }
  
  
• 
  
  ]
  
  
  

在router.js文件 中编写入口文件代码，示例如下

推荐使用实例1的方式返回Vue Router实例，在服务端渲染的过程中，每次必须生成一个新的Vue Router，使用同一个Vue Router会导致内存溢出。客户端渲染倒是可以用同一个Vue Router，但还是推荐统一用实例1的方式返回Vue Router实例

• 
  
  // 引用vue-router插件
  
  
• 
  
  import Router from 'vue-router'
  
  
• 
  
  // 使用基础路由配置
  
  
• 
  
  import routes from './routes'
  
  
• 
  
  
  
  
• 
  
  // 返回Vue Router实例1
  
  
• 
  
  export default () => {
  
  
• 
  
    return new Router({
  
  
• 
  
      routes
  
  
• 
  
    })
  
  
• 
  
  }
  
  
• 
  
  
  
  
• 
  
  // 返回Vue Router实例2
  
  
• 
  
  // const router = new Router({
  
  
• 
  
  //   routes
  
  
• 
  
  // })
  
  
• 
  
  // export default router
  
  
  

定义好Vue Router的入口文件之后，接下来，要在项目的入口文件（index.js）中使用

• 
  
  import Vue from 'vue'
  
  
• 
  
  import App from './app.vue'
  
  
• 
  
  import VueRouter from 'vue-router'
  
  
• 
  
  import createRouter from './config/router'
  
  
• 
  
  
  
  
• 
  
  Vue.use(VueRouter)
  
  
• 
  
  
  
  
• 
  
  const router = createRouter()
  
  
• 
  
  
  
  
• 
  
  new Vue({
  
  
• 
  
    router,
  
  
• 
  
    render: (h) => h(App)
  
  
• 
  
  }).$mount(root)
  
  
  

Vue-router之配置

详解Vue Router的入口文件router.js的配置

• 
  
  import Router from 'vue-router'
  
  
• 
  
  import routes from './routes'
  
  
• 
  
  
  
  
• 
  
  export default () => {
  
  
• 
  
    return new Router({
  
  
• 
  
      routes,
  
  
• 
  
      // 链接可以加前缀
  
  
• 
  
      base: '/base/',
  
  
• 
  
      // 链接访问方式，vue默认为hash模式，可设置为history模式
  
  
• 
  
      mode: 'history',
  
  
• 
  
      // 页面中使用<router-link to="/login">/login</router-link>设置导航
  
  
• 
  
      // 当前激活状态页面的对应跳转链接会有router-link-exact-active，router-link-active两个样式，可以自定义样式名称
  
  
• 
  
      linkActiveClass: 'a',
  
  
• 
  
      linkExactActiveClass: 'b',
  
  
• 
  
      // 页面路径跳转时，是否进行滚动行为，并且可指定滚动到什么位置
  
  
• 
  
      scrollBehavior (to, from, savedPosition) {
  
  
• 
  
        if (savedPosition) {
  
  
• 
  
          return savedPosition
  
  
• 
  
        } else {
  
  
• 
  
          return {x: 0, y: 0}
  
  
• 
  
        }
  
  
• 
  
      }
  
  
• 
  
      // 不是所有浏览器都支持前端路由方式（history模式），设置成true，vue会自动转换成hash转换方式
  
  
• 
  
      // 若设置成false，单页应用就变成了多页应用，每次页面跳转都会请求后端返回新的内容，比较耗时
  
  
• 
  
      fallback: true
  
  
• 
  
      // vue默认已处理了链接上的参数，以下方法可自定义转换方式
  
  
• 
  
      parseQuery (query) {
  
  
• 
  
        // 将字符串转成obj
  
  
• 
  
      },
  
  
• 
  
      stringifyQuery (obj) {
  
  
• 
  
        // 将obj转成字符串
  
  
• 
  
      }
  
  
• 
  
    })
  
  
• 
  
  }
  
  
  

Vue-router之路由参数传递

动态路由、路由传参、懒加载、命名视图、路由命名、路由元信息、子路由、路由钩子

• 
  
  {
  
  
• 
  
      // 动态路由其实又可以叫做路由传参
  
  
• 
  
      path: '/login/:id',
  
  
• 
  
      //  推荐用法props: true，实现组件中不需要写this.$route.id，.vue文件中写了$route相当于耦合，避免之后vue-router升级之后写法不一样
  
  
• 
  
      // 如果组件中使用了$route，则不能当成一个单独的组建使用，因为会去路由上找id值，使用了props接受参数，其他组件只要通过prop传递
  
  
• 
  
      // 尽量使vue和$route解耦，让组件复用性更高
  
  
• 
  
      props: true,
  
  
• 
  
      // props: {id: '111'},
  
  
• 
  
      // props: (route) => ({id: route.query.id}),
  
  
• 
  
      component: Login,
  
  
• 
  
      // 懒加载，页面进入时再去加载组件，避免一开始加载所有组件（非当前组件）的js
  
  
• 
  
      // component: () => import('../views/todo/todo.vue'), // 异步路由配置，首屏加载速度更快
  
  
• 
  
      // 命名视图
  
  
• 
  
      // 有时候想同时（同级）展示多个视图，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
  
  
• 
  
      // <router-view class="view one"></router-view>
  
  
• 
  
      // <router-view class="view two" name="sidebar"></router-view>
  
  
• 
  
      // <router-view class="view three" name="header"></router-view>
  
  
• 
  
      // components: {
  
  
• 
  
      //   default: Login,
  
  
• 
  
      //   a: Sidebar,
  
  
• 
  
      //   b: Header
  
  
• 
  
      // },
  
  
• 
  
      // 路由命名。可通过路由名称进行路由跳转<router-link :to="{name: 'app'}">/app</router-link>
  
  
• 
  
      name: 'app',
  
  
• 
  
      // 路由元信息，保存路由中的信息 在写HTML页面时，可以在head标签中定义meta，mate即页面源信息，这些信息有利于seo处理。而在vue组件中很难写这东西
  
  
• 
  
      meta: {
  
  
• 
  
        title: 'this is app',
  
  
• 
  
        description: 'description'
  
  
• 
  
      },
  
  
• 
  
      // 子路由
  
  
• 
  
      children: []
  
  
• 
  
      // 路由钩子
  
  
• 
  
      // beforeEnter (to, from, next) {
  
  
• 
  
      //   console.log('app route before enter')
  
  
• 
  
      //   next()
  
  
• 
  
      // }
  
  
• 
  
    }
  
  
  

在使用懒加载时，需要安装对应插件

npm i babel-plugin-syntax-dynamic-import -D

安装完成，修改.babelsrc

Vue-router之导航守卫

vue-router中的导航钩子按定义位置不同(执行时机也不同)分为全局钩子、路由级钩子和组件级钩子。

在项目入口文件（index.js）中的路由守卫，全局钩子

• 
  
  import Vue from 'vue'
  
  
• 
  
  import App from './app.vue'
  
  
• 
  
  import VueRouter from 'vue-router'
  
  
• 
  
  import createRouter from './config/router'
  
  
• 
  
  
  
  
• 
  
  Vue.use(VueRouter)
  
  
• 
  
  
  
  
• 
  
  const router = createRouter()
  
  
• 
  
  
  
  
• 
  
  // 全局路由钩子
  
  
• 
  
  router.beforeEach((to, from, next) => {
  
  
• 
  
    // 路由跳转前可做数据校验，例如判断是否登陆
  
  
• 
  
    console.log('global beforeEach')
  
  
• 
  
    next()
  
  
• 
  
  })
  
  
• 
  
  router.beforeResolve((to, from, next) => {
  
  
• 
  
    console.log('global beforeResolve')
  
  
• 
  
    next()
  
  
• 
  
  })
  
  
• 
  
  router.afterEach((to, from) => {
  
  
• 
  
    console.log('global afterEach')
  
  
• 
  
  })
  
  
• 
  
  
  
  
• 
  
  new Vue({
  
  
• 
  
    router,
  
  
• 
  
    render: (h) => h(App)
  
  
• 
  
  }).$mount(root)
  
  
  

在 router.js文件 中的路由守卫，路由级钩子

• 
  
  import Login from '../views/login/login.vue'
  
  
• 
  
  
  
  
• 
  
  export default [
  
  
• 
  
    {
  
  
• 
  
      path: '/login',
  
  
• 
  
      component: Login,
  
  
• 
  
      beforeEnter (to, from, next) {
  
  
• 
  
        console.log('router beforeEnter')
  
  
• 
  
        next()
  
  
• 
  
      }
  
  
• 
  
    }
  
  
• 
  
  ]
  
  
  

在 .vue文件中 的路由守卫，组件级钩子

• 
  
  <template>
  
  
• 
  
    <div>
  
  
• 
  
      组件级钩子
  
  
• 
  
    </div>
  
  
• 
  
  </template>
  
  
• 
  
  
  
  
• 
  
  <script>
  
  
• 
  
  export default {
  
  
• 
  
    mounted () {
  
  
• 
  
      console.log('mounted')
  
  
• 
  
    },
  
  
• 
  
    beforeRouteEnter (to, from, next) {
  
  
• 
  
      console.log('component beforeRouteEnter')
  
  
• 
  
      next()
  
  
• 
  
    },
  
  
• 
  
    beforeRouteUpdate (to, from, next) {
  
  
• 
  
      console.log('component beforeRouteUpdate')
  
  
• 
  
      next()
  
  
• 
  
    },
  
  
• 
  
    beforeRouteLeave(to,from,next){
  
  
• 
  
      console.log('component beforeRouteLeave')
  
  
• 
  
      next()
  
  
• 
  
    }
  
  
• 
  
  }
  
  
• 
  
  </script>
  
  
  

由其他页面进入有组件路由的页面：

global beforeEach → router beforeEnter → component beforeRouteEnter → global beforeResolve → global afterEach → mounted

由有组件路由的页面回到其他页面：

component beforeRouteLeave → global beforeEach → global beforeResolve → global afterEach

排除beforeRouteUpdate，其余六个导航钩子的执行时机其实很好理解。大体按照leave、before、enter、resolve、after的顺序并全局优先的思路执行。beforeRouteUpdate的触发是在动态路由情形下，比如 path: '/user/:userName' 这条路由，当页面不变更只动态的改变参数userName时，beforeRouteUpdate便会触发。

总结

使用vue组件拼凑成整个应用，每个页面是独立的，路由依靠链接跳转，会刷新页面。使用vue-router则可以不刷新页面加载对应组件，hash和history模式模拟路径变化，不刷新页面。

奈斯