vue.js2.0 + ElementUI开发管理类系统（二、配置路由）

components

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

login.vue        welcome.vue           home.vue

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

 

//引入vue
import Vue from 'vue'

//引入vue-router

import 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,

                                      },

                                   },

                                ],

                            },

       ]
    }