目录
1. 素材下载:
练习资料素材上传到如下链接,需要的自行下载:
案例:后台管理系统(VUE路由)素材https://download.csdn.net/download/qq_57587705/85320825
2. 案例效果
3. 案例用到的知识点
⚫ 命名路由
⚫ 路由重定向
⚫ 导航守卫
⚫嵌套路由
⚫ 动态路由匹配
⚫ 编程式导航
4. 案例各个部分的实例代码(这里只提供修改的代码)
项目目录:
路由模块index.js部分:
import Vue from 'vue'
import VueRouter from 'vue-router'
import pathArr from '@/router/pathArr.js'
// 导入需要的组件
import Login from '@/components/MyLogin.vue'
import Home from '@/components/MyHome.vue'
import Users from '@/components/menus/MyUsers.vue'
import Rights from '@/components/menus/MyRights.vue'
import Goods from '@/components/menus/MyGoods.vue'
import Orders from '@/components/menus/MyOrders.vue'
import Settings from '@/components/menus/MySettings.vue'
import UserDetail from '@/components/user/MyUserDetail.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
// 登录的路由规则
{ path: '/login', component: Login },
// 后台主页的路由规则
{
path: '/home',
component: Home,
redirect: '/home/users',
children: [
{ path: 'users', component: Users },
{ path: 'rights', component: Rights },
{ path: 'goods', component: Goods },
{ path: 'orders', component: Orders },
{ path: 'settings', component: Settings },
// 用户详情页的路由规则
{ path: 'userinfo/:id', component: UserDetail, props: true }
]
}
]
})
// 全局前置守卫
router.beforeEach(function(to, from, next) {
if (pathArr.indexOf(to.path) !== -1) {
const token = localStorage.getItem('token')
if (token) {
next()
} else {
next('/login')
}
} else {
nex