vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图

第一步：定义路由文件 router >index.js如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
 
import home from '@/components/Home'
import router1 from '@/components/Router1'
import router2 from '@/components/Router2'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/home',  
      name: 'home',
      component: home
    },
    {
      path: '/router1',
      name: 'routerNum1',
      component: router1
    },
    {
      path: '/router2',
      name: 'routerNum2',
      component: router2
    },    
  ]
})

第二步：home.vue组件文件代码如下

第三步：router1.vue组件代码如下，使用this.$route.params.paramName或query.queryName接收路由传的参数。