Vue+ElementUI项目笔记（二、配置路由）

components

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

login.vue welcome.vue home.vue

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

import Vue from 'vue'

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,

            meta: { requiresAuth: true },

            }

     ]

})

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'

{

  path: '/Home/:type',

  component: Home,

   children: [

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

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

                   ]

}