vue-router 路由详解

npm安装 vue-router

npm install vue-router

项目使用vue-router

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

main.js 配置路由

//模板layout

import Base from './components/layout/Base'

import Home from './components/index/Home'

//登录

import Login from './components/login/Login'

//用户会员

import UserList from './components/user/List'

import UserAdd from './components/user/Add'

import UserEdit from './components/user/Edit'

import RoleList from './components/role/List'

import RoleAdd from './components/role/Add'

import RoleEdit from './components/role/Edit'

//库存

import StockList from './components/stock/List'

import StockAdd from './components/stock/Add'

//财务

import FinanceList from './components/finance/List'

import FinanceAdd from './components/finance/Add'

import FinanceEdit from './components/finance/Edit'

//路由

import RouteList from './components/route/List'

import RouteAdd from './components/route/Add'

import RouteEdit from './components/route/Edit'

//资讯

import NewsList from './components/news/List'

import CategoryList from './components/category/List'

//报错

import Error404 from './components/error/404'

//

import UeditorJson from './components/ueditor/Json'

const router = new VueRouter({

    routes:[

            {

                path:'/',name:"indexLink",redirect: '/index',component:Base,meta: {breadcrumbName:'首页管理'},children:[

                  {path:'/index',name:"homeLink",component:Home,meta: {requireAuth: true,breadcrumbName:'欢迎'}},

                ]        

            },

             {path:'/login',name:"loginLink",component:Login,meta: {title:'登录中心'}},

                

                  //会员

                  {path:'/user',name:"userLink",redirect: '/user/list',component:Base,meta:{breadcrumbName:'用户管理'},children:[

                      {path:'/user/list',name:"userListLink",component:UserList,meta: {requireAuth: true,breadcrumbName:'列表',title:'用户列表'}},

                      {path:'/user/add',name:"userAddLink",component:UserAdd,meta: {requireAuth: true,breadcrumbName:'新增',title:'用户新增'}},

                      {path:'/user/edit/:id',name:"userEditLink",component:UserEdit,meta: {requireAuth: true,breadcrumbName:'编辑',title:'编辑'}},

                    ]},

                  {path:'/role',name:"roleLink",redirect: '/role/list',component:Base,meta:{breadcrumbName:'角色管理'},children:[

                      {path:'/role/add',name:"roleAddLink",component:RoleAdd,meta: {requireAuth: true,breadcrumbName:'新增',title:'新增'}},

                      {path:'/role/edit/:id',name:"roleEditLink",component:RoleEdit,meta: {requireAuth: true,breadcrumbName:'编辑',title:'编辑'}},

                      {path:'/role/list',name:"roleListLink",component:RoleList,meta: {requireAuth: true,breadcrumbName:'列表',title:'列表'}},

                    ]},

                

                  //库存

                  {path:'/stock',name:"stockLink",redirect: '/stock/list',component:Base,meta:{breadcrumbName:'库存管理'},children:[

                      {path:'/stock/list',name:"stockListLink",component:StockList,meta: {requireAuth: true,breadcrumbName:'列表',title:'列表'}},

                      {path:'/stock/add',name:"stockAddLink",component:StockAdd,meta: {requireAuth: true,breadcrumbName:'新增',title:'新增'}},

                    ]},

                

                  //财务

                  {path:'/finance',name:"financeLink",redirect: '/finance/list',component:Base,meta:{breadcrumbName:'财务管理'},children:[

                      {path:'/finance/list',name:"financeListLink",component:FinanceList,meta: {requireAuth: true,breadcrumbName:'列表',title:'列表'}},

                      {path:'/finance/add',name:"financeAddLink",component:FinanceAdd,meta: {requireAuth: true,breadcrumbName:'新增',title:'新增'}},

                      {path:'/finance/edit/:id',name:"financeEditLink",component:FinanceEdit,meta: {requireAuth: true,breadcrumbName:'编辑',title:'编辑'}},

                    ]},

                

                  //路由管理

                  {path:'/route',name:"routeLink",redirect: '/route/list',component:Base,meta:{breadcrumbName:'路由管理'},children:[

                      {path:'/route/list',name:"routeListLink",component:RouteList,meta: {requireAuth: true,breadcrumbName:'列表',title:'列表'}},

                      {path:'/route/add',name:"routeAddLink",component:RouteAdd,meta: {requireAuth: true,breadcrumbName:'新增',title:'新增'}},

                      {path:'/route/edit/:id',name:"routeEditLink",component:RouteEdit,meta: {requireAuth: true,breadcrumbName:'编辑',title:'编辑'}},

                    ]},

                

                  //路由管理

                  {path:'/news',name:"newsLink",redirect: '/news/list',component:Base,meta:{breadcrumbName:'资讯管理'},children:[

                      {path:'/news/list',name:"newsListLink",component:NewsList,meta: {requireAuth: true,breadcrumbName:'列表',title:'列表'}},

                      {path:'/category/list',name:"categoryListLink",component:CategoryList,meta: {requireAuth: true,breadcrumbName:'分类',title:'分类'}},

                    ]},

                  //接受ueditor 图片跨域展示json

                  {path:'/ueditor/json',component:UeditorJson},

                

                  {path:'/404',name:"errorLink",component:Error404},

                  {path:'*',redirect:'/404'}

    ],

    mode:"history" //去掉url上面的#

});

路由加载使用

new Vue({

  store:store,

  el: '#app',

  router:router,

  //render: h => h(App)

  template: '<App/>',

  components: {App}

})

App.vue里加入路由router-view

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>