Vue Router - 简介

是 Vue.js 官方的路由管理器。可以在任何组件内通过 this.$router访问路由器，也可以通过this.$route 访问当前路由。

• 动态路由匹配 - 在组件中使用 this.$route.params 获取对应参数
• 嵌套路由
• 路由元信息 - meta: {}
• 路由组件传参 - 配置 props: true
• 路由懒加载 - component: () => import(’./views/Demo.vue’)
• 导航守卫 - router.beforeEach((to, from, next) => {})、router.afterEach((to, from, next) => {})

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'demo',
      component: () => import('./views/Demo.vue'),
      meta: {
        title: 'Demo'
      }
    },
    {
      path: '/index',
      name: 'index',
      component: () => import('./views/Index.vue'), // 路由懒加载
      meta: {
        title: '首页'
      }
    },
    {
      path: '/detail/:id', // 动态路由配置
      name: 'detail',
      component: () => import('./views/Detail.vue'),
      meta: {
        title: '详情'
	  },
	  props: true
	},
  ]
})