element ui路由配置文件_vue.js2.0 + ElementUI开发管理类系统（二、配置路由）

components

在components文件夹下新建vue文件：

login.vue        welcome.vue           home.vue

index.js ======单级路由

//引入vue

import Vue from 'vue'

//引入vue-routerimport Router from 'vue-router'

//引入需要路由的文件

import Login from '@/components/Login'

import Welcome from '@/components/Welcome'

import Home from '@/components/Home'

//使用路由

Vue.use(Router)//配置路由

export const router = new Router({

routes: [

{

//路径

path: '/login',

//名称

name: 'Login',

//组件

component: Login,

},

{

//默认路由进来的组件

path: '/',

name: 'Welcome',

component: Welcome,

}

]

})

pages

在pages文件夹下新建：

文件夹home，在home下新建：index.vue     add.vue        search.vue

index.js ======多级路由

//引入文件

import Home from '@/pages/home/index'import HomeAdd from '@/pages/home/add'

import HomeSearch from '@/pages/home/search'

import Detail from '@/pages/home/detail'

import Cost from '@/pages/home/cost'

{

//多级路由 /： /:hoem?

path: '/Home/:type',

component: Home,

//子级

children: [

{ path: "add", component: HomeAdd, name:"HomeAdd" },

{ path: "search", component: HomeSearch, name:"HomeSearch"},

{

path: "billing/:item/:id?",

component: ReceiveBilling,

children: [

{

path: "",

components: {

detail: Detail,

cost: Cost,

},

},

],

},

]

}