提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、项目目录
二、源代码
main.js
import {
createApp } from 'vue'
import App from './App.vue'
import './index.css'
import './assets/css/bootstrap.min.css'
import router from './router.js'
const app = createApp(App)
//全局使用路由
app.use(router)
app.mount('#app')
App.vue
<template>
<div>
<!--路由占位符 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
router.js
// 引入vue-router
import {
createRouter, createWebHashHistory } from 'vue-router'
import Login from './components/Login_page/Login.vue'
import Home from './components/Home_page/Home.vue'
import User from './components/menus/User.vue'
import Author from './components/menus/Author.vue'
import Goods from './components/menus/Goods.vue'
import Order from './components/menus/Order.vue'
import System from './components/menus/System.vue'
import Detail from './components/menus/Detail.vue'
// 声明路由对象
const router = createRouter({
history: createWebHashHistory(),
// 声明路由规则
routes: [
{
path: '/', redirect: '/login' },
{
path: '/login',
component: Login
},
{
path: '/home',
redirect: '/home/user'
},
// 子路径不写'/'
{
path: '/home',
component: Home,
children: [
{
path: 'user', component: User },
{
path: 'author', component: Author },
{
path: 'goods', component: Goods },
{
path: 'order', component: Order },
{
path: 'system', component: System },
// 开启传参
{
path: 'user/:id', component: Detail, props: true }
]
}
]
})
// 全局路由守卫,设置访问的权限
router.beforeEach((to, from, next) => {
const MyItem = localStorage.getItem('MyItem')
// 如果访问的是'/login',直接放行
if (to.path === '/login') return next()
// 如果不存在MyItem则直接跳转登录页面,反之放行
if (!MyItem) {
return next('/login')
} else {
next()
}
}