vue 3 嵌套路由、路由重定向、动态路由、编程性导航、命名路由、路由守卫使用的案例

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、项目目录

二、源代码

• 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()
  }
}