可以在vue组件中使用 页面的进入 离开 等等 来满足项目需求
点击此处跳转路由懒加载 官网
import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFound from '@/components/notfound/NotFound'
import Login from '@/components/login/Login'
const Home = ( ) = > import ( '@/components/home/Home' ) //下面都是路由懒加载模式
const Users = ( ) = > import ( '@/components/users/Users' )
const Roles = ( ) = > import ( '@/components/roles/Roles' )
const Rights = ( ) = > import ( '@/components/rights/Rights' )
const Categories = ( ) = > import ( '@/components/categories/Categories' )
const Goods = ( ) = > import ( '@/components/goods/Goods' )
const Goodadd = ( ) = > import ( '@/components/goodadd/Goodadd' )
// import Home from '@/components/home/Home'
// import Users from '@/components/users/Users'
// import Roles from '@/components/roles/Roles'
// import Rights from '@/components/rights/Rights'
// import Categories from '@/components/categories/Categories'
// import Goods from '@/components/goods/Goods'
// import Goodadd from '@/components/goodadd/Goodadd'
Vue.use( VueRouter)
const router = new VueRouter( {
routes: [
{ path: '/' , component: Login } ,
{ path: '/login' , component: Login } ,
{ path: '/home' , component: Home ,
children: [
{ path: '/roles' , component: Roles } ,
{ path: '/users' , component: Users } ,
{ path: '/rights' , component: Rights } ,
{ path: '/categories' , component: Categories } ,
{ path: '/goods' , component: Goods } ,
{ path: '/goodadd' , component: Goodadd }
] } ,
{ path:'*' ,component:NotFound}
]
} )
//路由守卫
router.beforeEach(( to, from, next) = > {
if( to.path== = '/login' ) {
return next( )
}
const token = localStorage.getItem( 'token' )
if( token) {
next( )
} else{
next( '/login' )
}
} )
export default router