vue系列学习（五）——路由的基本使用

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import WatchTest from '@/components/WatchTest'
import KeepAliveDemo from '@/components/KeepAliveDemo'
import RouterDemo from '@/components/RouterDemo/index'
import Children1 from '@/components/RouterDemo/Children1'
import Children2 from '@/components/RouterDemo/Children2'
import NotFind from '@/components/NotFind'

Vue.use(Router)

export default new Router({
  linkActiveClass: '_active',  //匹配高亮
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/watch',
      name: 'WatchTest',
      component: WatchTest
    },
    {
      path: '/alive',
      name: 'KeepAliveDemo',
      component: KeepAliveDemo
    },
    {
      path: '/router/:id',  //动态路由
      name: 'RouterDemo',
      component: RouterDemo,
      children: [      //嵌套路由
        {
          path: 'children1',
          component: Children1   //注意这里不加"/"
        },
        {
          path: 'children2',
          component: Children2
        }
      ]
    },
    {
      path: '*',    //匹配找不到的路径
      name: 'NotFind',
      component: NotFind
    }
  ]
})