vue路由 router.js

1、先引入vue，vue-router文件和各组件

import Vue from 'vue'
import Router from 'vue-router'
import Index from "@/pages/Index"
import Detail from "@/pages/Detail"
import UserList from '../views/User/UserList'

2、Vue全局使用Router

Vue.use(Router)

3、配置路由

export default new Router({
  routes: [               //配置路由，这里是个数组
    {
      path: '/',          //链接路径
      name: 'Index',      //路由名称
      component: Index    //对应的组件模板
    },
    {
      path: '/Detail',
      name: 'Detail',
      component: Detail
    },
    {
      path: '/UserList',
      name: 'UserList',
      component: UserList
    }
    ]
})

4、如果有子路由，也需引入子路由组件

import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

5、配置路由时，如下写法

{
  path:'/hi',
  component:Hi,
  children:[
    {path:'/',component:Hi},
    {path:'hi1',component:Hi1},
    {path:'hi2',component:Hi2},
  ]
}