vue3中配置嵌套路由、导航守卫

效果：

1.安装 Vue Router

npm install vue-router@4
# 或
yarn add vue-router@4

2.创建路由配置文件

在项目的 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件。这个文件将包含你的路由配置

3.编写路由配置

import { createRouter, createWebHistory } from "vue-router";
import Dashboard from "../views/Dashboard/Dashboard.vue";
import DashboardOverview from "../views/Dashboard/DashboardOverview.vue";
import DashboardSettings from "../views/Dashboard/DashboardSettings.vue";

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "Home",
    component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue"),
  },
  {
    path: "/dashboard",
    name: "Dashboard",
    component: Dashboard,
    children: [
      {
        path: "",// 当 /dashboard 被访问时，默认重定向到 /dashboard/overview
        redirect: "/dashboard/overview",
      },
      {
        path: "overview", 
        name: "DashboardOverview",
        component: DashboardOverview,
      },
      {
        path: "settings", // 当 /dashboard/settings 被访问时展示的子路由
        name: "DashboardSettings",
        component: DashboardSettings,
      },
      // ... 其他子路由
    ],
  },
  // ... 其他主路由
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

4.在 Vue 应用中注册路由

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由配置

const app = createApp(App);
app.use(router); // 注册路由配置
app.mount('#app');

5.在组件中使用路由

在你的 Vue 组件中，你可以使用 组件来生成导航链接，使用 组件来渲染当前路由对应的组件。例如，在你的 App.vue 文件中：

<template>
  <router-link to="/home">Home</router-link>&nbsp;
  <router-link to="/dashboard">Dashboad</router-link>
  <router-view />
</template>

在Dashboard .vue中

<template>
  <div>
    <router-link to="/dashboard">DashboardOverview</router-link>&nbsp;
    <router-link to="/dashboard/settings">DashboardSettings</router-link>
    <router-view />
  </div>
</template>

或者使用编程式导航跳转
Vue 3 的 Composition API：

import { useRouter } from 'vue-router';
const router = useRouter();

function goToHome() {
  router.push('/');
}

6.添加路由守卫（可选）

如果你需要在路由切换时执行一些逻辑（例如权限检查），你可以使用 Vue Router 的路由守卫功能。你可以在 src/router/index.js 文件中使用 router.beforeEach() 方法来添加全局前置守卫：

router.beforeEach((to, from) => {
  const token = localStorage.getItem("token");
  if (to.path.startsWith('/dashboard') && !token) {
    console.log(token)
    return "/home"
  } 
})