vue路由 router.js

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

import Vue from 'vue'
import Router from 'vue-router'
import Logsj from "@/pages/Logsj"
import Logmm from "@/pages/Logmm"
import Index from "@/pages/Index"
import Detail from "@/pages/Detail"
import Car from "@/pages/Car"
import Mine from "@/pages/Mine"
import Find from "@/pages/Find"
import Info from "@/pages/Info"
import Story from "@/pages/Story"

2、Vue全局使用Router

Vue.use(Router)

3、配置路由

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

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},
      ]
    }

猜你喜欢