VUE 路由编写

一、目录router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 登录部分
import Login from '../views/user/Login'
// 后台导航首页
import First from '../views/index/First' 
// 后台内容首页
import FirstIndex from '../views/index/FirstIndex'
// 后台引导模块
import Driver from '../views/index/Driver'
// 后台用户数据模块
import UserIndex from '../views/index/UserIndex'
// 后台数据管理模块
import RoleAndPower from '../views/index/RoleAndPower'
// 后台商品管理模块
import Goods from '../views/index/Goods'
// 后台订单管理模块
import Order from '../views/index/Order'
Vue.use(VueRouter)
// 后台权限管理列表
import Power from '../views/index/Power'


const routes = [
  {
    path: '/',
    component: First,
    children: [ 
      {path: 'firstindex', alias: '/', component: FirstIndex},
      {path: 'driver', component: Driver},
      {path: 'userindex', component: UserIndex},
      {path: 'power', component: Power},
      {path: 'roleandpower', component: RoleAndPower},
      {path: 'order', component: Order},
      {path: 'goods', component: Goods},
      
    ]
  },
  // 登录
  {path: '/login', name: 'login', component: Login}
  
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//导航守卫监控路由变化   
router.beforeEach((newData, oldData, next) => {
  let token = localStorage.getItem("token")
  if (!token && (newData.path != "/login")) {
    next({ path: "/login" })
  } else {
    next()
  }
})

export default router