Vue路由进阶攻略

目录

一、路由配置

1、概述：

[2、在 Vite 项目中进行路由配置通常涉及以下步骤：](#2、在 Vite 项目中进行路由配置通常涉及以下步骤：)

[（1）安装和引入Vue Router：](#（1）安装和引入Vue Router：)

（2）定义路由组件：

（3）配置路由：

（4）重定向处理：

（5）创建路由器实例：

（6）设置历史模式：

（7）挂载路由器：

3、代码示例：

（1）index.js部分

（2）App.vue部分

（3）HomeView.vue部分

（4）AboutView.vue部分

（5）404View.vue部分

[（6） main.js部分](#（6） main.js部分)

二、路由嵌套

1、概述：

2、路由嵌套通常用于以下几种场景：

3、代码示例：

（1）index.js部分

（2）404View.vue

（3）AboutView.vue

（4）HomeView.vue

（5）SchoolView.vue

（6）TeacherView.vue

（7）XunlaoshiView.vue

（8）ZhangView.vue

（9）App.vue

三、路由传参

1、概述

（1）路径参数

（2）查询参数

2、实现步骤：

[（1）安装Vue Router‌：](#（1）安装Vue Router‌：)

​编辑‌（2）创建路由实例‌：

（3）定义路由规则‌：

（4）使用创建导航‌：

（5）使用渲染视图‌：

（6）获取路由参数‌：

3、代码示例

（1）index.js

（2）404View.vue

（3）AboutView.vue

（4）HomeView.vue

（5）App.vue

四、路由守卫

1、概述：

2、三种路由守卫是：

[（1）全局守卫（Global Guards）‌：](#（1）全局守卫（Global Guards）‌：)

[（2）路由独享守卫（Route Guards）‌：](#（2）路由独享守卫（Route Guards）‌：)

[（3）组件内守卫（In-component Guards）‌：](#（3）组件内守卫（In-component Guards）‌：)

3、代码示例：（main.js部分）

---

一、路由配置

1、概述：

Vite 路由配置是指在基于 Vite 的 Vue.js 项目中，使用 Vue Router 来定义和管理应用中的路由规则的设置过程。Vue Router 是 Vue.js 的官方路由管理器，它允许你为单页面应用定义路由，控制页面的切换和数据的加载。

2、在 Vite 项目中进行路由配置通常涉及以下步骤：

（1）安装和引入Vue Router：

在项目创建时或者之后，需要安装 Vue Router。从 'vue-router'包中引入'createRouter' 和'createWebHistory' 方法。

（2）定义路由组件：

引入或定义你将在应用中使用的组件，如 'HomeView.vue', 'AboutView.vue', 和 '404View.vue'。

（3）配置路由：

创建一个路由数组，其中每个路由都是一个对象，定义了路径'path'、名称 'name' 以及对应的组件'component'。对于懒加载的组件，可以使用动态导入'()' => import('...')'。

（4）重定向处理：

如果需要，可以设置重定向规则。例如，将根路径 '/' 重定向到'/home'。

（5）创建路由器实例：

使用 'createRouter' 函数创建一个路由器实例，并传入路由配置。

（6）设置历史模式：

在创建路由器实例时，通常使用 'createWebHistory'来创建一个历史记录，使得 URL 更像传统网页。

（7）挂载路由器：

在应用的入口文件（通常是 'main.js' 或'main.ts'）中，将路由器实例挂载到 Vue 应用实例上。

3、代码示例：

（1）index.js部分

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      radirect: '/home',//当用户在浏览器地址栏输入'/'这个路径时，直接直接跳转到"/home"
      

    },
    {
      path: '/',
      name: 'home',
      component: ()=>import('../views/HomeView.vue'), //当用户点击斜杆"/"这个超链接时，会将Homeview组件渲染到router-view容器里

    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
    {
      path: '/:pathMatch(.*)', //用于在浏览器地址栏输入不存在的路径，就会执行这个路径
      name: '404',
      component: () => import('../views/404View.vue'),
    },
  ],
})

export default router

注释：

• 使用 Vue Router 的 'createRouter' 函数和 'createWebHistory'模式创建了一个路由实例。

• 路由配置包含以下几条规则：

• 当用户输入 '/' 时，会重定向到 '/home'。

• 用户访问 '/home'路径时，会渲染 'HomeView'组件。

• 用户访问 '/about' 路径时，会加载 'AboutView'组件。

• 任何不匹配以上路径的请求都会被捕获，并渲染 '404View'组件。

（2）App.vue部分

<template>
  <div>
  <!-- <a href="/home">调转至首页</a> -->
   <!-- <a href="/about">调转至关于</a> -->
  <router-link to="/">调转至首页</router-link>
  <router-link to="/about">调转至关于</router-link>
  <router-link to="/aaa">调转到404</router-link>
    <div class="container">
      <!-- 不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL-->

    <!-- 用下面这段固定代码（官网这么推荐的，不用管为什么），代替最简单的<router-view>，可以实现页面数据的缓存 -->
    <!-- <router-view></router-view> -->
      <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    </div>
</div>  
</template>

<script setup>
  import  AboutView from "./views/AboutView.vue";
  import  HomeView from "./views/HomeView.vue";
</script>

<style scoped>
  .container{
    width:500px;
    height:100px;
    
  }
</style>

注释：

• App.vue 文件包含了应用的根组件模板。

• 使用了 Vue Router 的 '<router-link>' 组件来创建导航链接 ，允许用户在不重新加载页面的情况下跳转到不同的路径。

• '<router-view>' 组件被用于显示当前路由对应的组件。这里使用了一个具名插槽（'v-slot="{ Component }"'）和 '<keep-alive>' 来缓存非活动组件的状态，从而提高应用的性能。

（3）HomeView.vue部分

<template>
  <div>
    <h3>我是首页</h3>
    <h3>计数器的值为：{{num}}</h3>
    <button v-on:click="addCount">点击+1</button>
    
  </div>
</template>

<script setup>
  import { ref,reactive} from "vue";
  const num=ref(0);
  const addCount=()=>{
    num.value++;
  }
</script>

<style scoped>

</style>

注释:

• HomeView.vue 是首页组件 使用 Vue 的 Composition API ('ref') 来创建一个响应式变量 'num'。

• 有一个按钮，当点击时，会通过 'addCount' 函数将 'num' 的值增加 1。

（4）AboutView.vue部分

<template>
  <div>
      <h3>我是关于</h3>
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

（5）404View.vue部分

<template>
    <div>
        <h3>404:你访问的资源不存在，请检查您的URL连接</h3>
    </div>
</template>

<script setup >

</script>

<style scoped>

</style>

注释：

• 404View.vue 是一个用于显示404错误信息的组件。

• 当用户访问一个不存在的路径时，会显示这个组件。

（6） main.js部分

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

运行结果：

20241207_194938

二、路由嵌套

1、概述：

Vue中的路由嵌套‌是指在Vue.js应用中，通过Vue Router配置多个嵌套的路由 ，使得一个路由组件可以包含另一个路由组件。 这种嵌套结构允许在一个页面中显示多个子页面，从而实现复杂的页面布局和导航结构‌。

2、路由嵌套通常用于以下几种场景：

（1）在一个主页面中包含多个子页面‌ ：例如，一个新闻网站的主页可能包含多个子页面，如"科技"、"体育"等。

‌（2）在一个页面中显示多个模块或部分‌ ：例如，一个电商网站的产品页面可能包含商品详情、用户评价等多个模块。

‌（3）创建具有多级导航的复杂应用‌：例如，一个企业官网的导航菜单可能包含多个子菜单项。

3、代码示例：

（1）index.js部分

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      radirect: '/home',//当用户在浏览器地址栏输入'/'这个路径时，直接直接跳转到"/home"
      

    },
    {
      path: '/',
      name: 'home',
      component: ()=>import('../views/HomeView.vue'), //当用户点击斜杆"/"这个超链接时，会将Homeview组件渲染到router-view容器里

    },
    {
      path: '/about',//把该组件渲染到该页面的router---vue容器中
      name: 'about',
      component: () => import('../views/AboutView.vue'),
      children:[
        {
          path: '/about/school',//该方法已经告诉vue框架，把该组件渲染到about页面内
          name: 'school',
          component: () => import('../views/SchoolView.vue'),
        },
        {
          path: '/about/teacher',//该方法已经告诉vue框架，把该组件渲染到about页面内
          name: 'teacher',
          component: () => import('../views/TeacherView.vue'),
          children:[
            {
              path: '/about/teacher/Zhang',//该方法已经告诉vue框架，把该组件渲染到about页面内
              name: 'teacher/Zhang',
              component: () => import('../views/ZhangView.vue'),
            },
            {
              path: '/about/teacher/Xunlaoshi',//该方法已经告诉vue框架，把该组件渲染到about页面内
              name: 'teacher/Xunlaoshi',
              component: () => import('../views/XunlaoshiView.vue'),
            },
          ]
        },
      ]
    },
    




    {
      path: '/:pathMatch(.*)', //用于在浏览器地址栏输入不存在的路径，就会执行这个路径
      name: '404',
      component: () => import('../views/404View.vue'),
    },
  ],
})

export default router

const router = createRouter({

....

})

```

这部分代码定义了路由配置。每个路由都有一个'path'属性来定义路径，一个'name'属性来定义路由名称（可选），以及一个'component'函数，该函数返回一个动态导入的组件。这里使用了动态导入（'() => import('...')'），这是一种代码分割的方法，它允许Vue在需要时才加载组件，从而提高应用的性能。
children:[

......

]

这段代码是Vue.js框架中的一个路由配置部分，它定义了Vue Router如何将不同的路径映射到Vue组件上 。具体来说，这段代码定义了"about"页面下的两个子路由 以及各自的子组件。

下面是对代码的逐行解释：

-**'children:': 这是一个数组，表示当前路由的子路由。**在这个例子中，它是顶级路由（可能为 '/about'）的子路由。

• '{': 这是一个对象的开始， 代表一个子路由的配置。

• 'path: '/about/school',': 定义了子路由的路径。 在这里，它指的是 '/about/school'。当用户访问这个路径时，Vue Router将会渲染对应的组件。

• 'name: 'school',': 给子路由定义了一个名字 ，这个名字可以在编程时用来引用该路由。

-'component: () => import('../views/SchoolView.vue'),': 这是一个动态导入的语法 。它告诉Vue Router在用户访问这个路由时才加载并渲染 'SchoolView.vue'组件。这种按需加载的方式有助于提高应用程序的性能。

• '},': 第一个子路由配置对象的结束。

• '{`: 第二个子路由配置对象的开始 。

• 'path: '/about/teacher',': 定义了 第二个子路由的路径 。

• 'name: 'teacher',': 给第二个子路由定义了名字 。

• 'component: () => import('../views/TeacherView.vue'),': 当访问 '/about/teacher' 路径时，将渲染 `TeacherView.vue` 组件。

• 'children:': 这个子路由有自己的子路由数组， 表示在 '/about/teacher' 基础上的更具体的路由。

-'{': 第一个子子路由配置对象的开始。

• ': '/about/teacher/Zhang',': 定义了子子路由的路径 。

• 'name: 'teacher/Zhang',': 给子子路由定义了名字 。

-'component: () => import('../views/ZhangView.vue'),': 当访问 '/about/teacher/Zhang' 路径时，将渲染 'ZhangView.vue'组件。

• '},': 第一个子子路由配置对象的结束 。

• '{': 第二个子子路由配置对象的开始 。

• 'path: '/about/teacher/Xunlaoshi',': 定义了另一个子子路由的路径 。

• 'name: 'teacher/Xunlaoshi',': 给子子路由定义了名字 。

• 'component: () => import('../views/XunlaoshiView.vue'),': 当访问 '/about/teacher/Xunlaoshi' 路径时，将渲染 `XunlaoshiView.vue' 组件。

• '},': 第二个子子路由配置对象的结束。

• ']': 结束子路由数组的定义。

这个配置使得Vue应用在用户访问如 '/about/school' 或 '/about/teacher/Zhang' 这样的路径时，可以动态地加载和显示对应的组件。

（2）404View.vue

<template>
    <div>
        <h3>404:你访问的资源不存在，请检查您的URL连接</h3>
    </div>
</template>

<script setup >

</script>

<style scoped>

</style>

这是一个简单的Vue组件，用于显示404错误页面。

（3）AboutView.vue

<template>
  <div>
      <h3>我是"关于"页面</h3>
      <router-link to="/about/school">调转到学校</router-link>
      <router-link to="/about/teacher">调转到教师</router-link>

      <router-view/>
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

这是"关于"页面组件，其中包含了跳转到"学校"和"教师"页面的链接，以及用于显示子路由内容的 '<router-view>'。

（4）HomeView.vue

<template>
  <div>
    <h3>我是"首页"页面</h3>
    
  </div>
</template>

<script setup>
  

</script>

<style scoped>

</style>

这是首页组件，简单地显示一个标题。

（5）SchoolView.vue

<template>
  <div class="container">
    <h3>我是"学校简介"页面</h3>
    
  </div>
</template>

<script setup>
  

</script>

<style scoped>
 .container{
    width:500px;
    height:100px;
    background-color:red;
    
  }
</style>

这是"学校简介"页面组件，有一个红色的背景。

（6）TeacherView.vue

<template>
  <div class="container">
    <h3>我是"教师简介"页面</h3>
     <router-link to="/about/teacher/Zhang">调转到张老师</router-link>
     <router-link to="/about/teacher/Xunlaoshi">调转到寻老师</router-link>
        <router-view/>
  </div>
</template>

<script setup>
  

</script>

<style scoped>
.containe2{
    width:500px;
    height:100px;
    background-color:blue;
    
  }
</style>

这是"教师简介"页面组件，包含跳转到张老师和寻老师页面的链接，并有一个蓝色的背景。

（7）XunlaoshiView.vue

<template>
  <div>
      <h3>我是"寻老师简介"页面</h3>

     
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

这是"寻老师简介"页面组件

（8）ZhangView.vue

<template>
  <div>
      <h3>我是"张老师简介"页面</h3>

     
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

这是"张老师简介"页面组件

（9）App.vue

<template>
  <div>
  <!-- <a href="/home">调转至首页</a> -->
   <!-- <a href="/about">调转至关于</a> -->
  <router-link to="/">调转至首页</router-link>
  <router-link to="/about">调转至关于</router-link>
  <router-link to="/aaa">调转到404</router-link>
    <div class="container">
      <!-- 不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL-->

    <!-- 用下面这段固定代码（官网这么推荐的，不用管为什么），代替最简单的<router-view>，可以实现页面数据的缓存 -->
    <!-- <router-view></router-view> -->
      <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    </div>
</div>  
</template>  

<script setup>
  import  AboutView from "./views/AboutView.vue";
  import  HomeView from "./views/HomeView.vue";
</script>

<style scoped>
  .container1{
    width:500px;
    height:100px;
    background-color:gray;
  }
</style>

• App.vue 文件包含了应用的根组件模板。

• 使用了 Vue Router 的 '<router-link>' 组件来创建导航链接，允许用户在不重新加载页面的情况下跳转到不同的路径。

• '<router-view>' 组件被用于显示当前路由对应的组件。这里使用了一个具名插槽（'v-slot="{ Component }"'）和 '<keep-alive>' 来缓存非活动组件的状态，从而提高应用的性能。

三、路由传参

1、概述

Vue中的路由传参‌是指在页面跳转的同时传递一些数据给目标页面。常见的场景包括用户在列表页点击某个项目后跳转到详情页，并将对应项目的信息传递给详情页。Vue提供了两种主要的路由传参方式 ：‌路径参数‌和‌查询参数‌ 。

（1）路径参数

路径参数是将参数直接嵌入到URL的路径中 。这种方式适用于需要唯一标识的数据页面，如用户详情页或文章详情页。路径参数的优点是直观明了，路径结构清晰，适合表示层级关系的资源。缺点是参数必须是字符串类型，且URL格式较为固定，灵活性稍差。如：'/home/:name/:age'

（2）查询参数

查询参数是通过URL中的查询部分附加参数。这种方式适用于需要传递多个参数或参数值可能变化的情况，如搜索结果页或分页信息。查询参数的优点是灵活性高，可以传递多种类型的参数，URL格式更加灵活，可以适应不同的需求。缺点是URL可能较长且不够简洁，参数传递方式较为隐晦，不如路径参数直观。如："/about?product=苹果&price=3.5"

2、实现步骤：

（1）安装Vue Router‌：

确保Vue Router已经安装在你的Vue项目中。在项目创建时或者之后，需要安装 Vue Router。从 'vue-router'包中引入'createRouter' 和'createWebHistory' 方法。

‌（2）创建路由实例‌：

在项目的某个文件中（通常是index.js或router.js），使用createRouter和createWebHistory创建Vue Router实例。

（3）定义路由规则‌：

在路由实例中定义路由规则，包括路径、组件名、重定向规则等。

（4）使用<router-link>创建导航‌：

在Vue组件中使用<router-link>来创建导航链接，而不是传统的<a>标签。

（5）使用<router-view>渲染视图‌：

在需要渲染路由组件的地方使用<router-view>。

（6）获取路由参数‌：

在组件中通过route.params或route.query获取传递的参数。

3、代码示例

（1）index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
    history: createWebHistory(
        import.meta.env.BASE_URL),
    routes: [{
            path: '/',
            radirect: '/home', //当用户在浏览器地址栏输入'/'这个路径时，直接直接跳转到"/home"


        },
        {
            //通过路径直接传参，是用：来将参数伪装成路径渲染组件，待渲染组件会将其
            //解析出来，如下：
            // 商品名：{{$route.query.product}}
            // 价格：{{$route.query.price}}
            path: '/home/:name/:age',
            name: 'home',
            component: () =>
                import ('../views/HomeView.vue'), //当用户点击斜杆"/"这个超链接时，会将Homeview组件渲染到router-view容器里

        },
        {
            path: '/about',
            name: 'about',
            component: () =>
                import ('../views/AboutView.vue'),
        },
        {
            path: '/:pathMatch(.*)', //用于在浏览器地址栏输入不存在的路径，就会执行这个路径
            name: '404',
            component: () =>
                import ('../views/404View.vue'),
        },
    ],
})

export default router

注释：

（1）使用createRouter和createWebHistory创建了Vue Router实例 。

（2）定义了路由规则 ，包括路径、组件以及重定向规则。

（3）使用动态路由匹配（如/home/:name/:age）来传递参数。

（2）404View.vue

<template>
    <div>
        <h3>404:你访问的资源不存在，请检查您的URL连接</h3>
    </div>
</template>

<script setup >

</script>

<style scoped>

</style>

一个简单的404错误页面，用于显示当用户访问一个不存在的路由时的信息。

（3）AboutView.vue

<template>
  <div>
      <h3>我是关于</h3>

     商品名：{{$route.query.product}}
     价格：{{$route.query.price}}
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>

通过$route.query获取查询参数。在这个例子中，product和price是通过URL查询字符串传递的参数。

（4）HomeView.vue

<template>
  <div>
    <h3>我是首页</h3>
    姓名：{{$route.params.name}}
    年龄：{{$route.params.age}}
  </div>
</template>

<script setup>
 
</script>

<style scoped>

</style>

通过$route.params获取路由参数。在这个例子中，name和age是通过路由路径传递的参数。

（5）App.vue

<template>
  <div>
  <!-- <a href="/home">调转至首页</a> -->
   <!-- <a href="/about">调转至关于</a> -->
  <router-link to="/home/李雷/19">调转至首页</router-link>
  
  <router-link to="/about?product=苹果&price=3.5">调转至关于</router-link>
  <router-link to="/aaa">调转到404</router-link>
    <div class="container">
     <router-view></router-view>        
    </div>
</div>  
</template>

<script setup>
  import  AboutView from "./views/AboutView.vue";
  import  HomeView from "./views/HomeView.vue";
</script>

<style scoped>
  .container{
    width:500px;
    height:100px;
    
  }
</style>

注释：

（1）使用了<router-link>组件来创建导航链接 ，而不是传统的<a>标签。<router-link>是Vue Router提供的一个组件，用于在Vue应用中创建声明式导航。

（2）<router-view>组件 是一个功能性组件，用于渲染路径匹配到的视图组件。在这个例子中，它会根据当前URL渲染HomeView、AboutView或404View组件。

运行结果：

四、路由守卫

1、概述：

在Vue中，路由守卫（Router Guards）是Vue Router提供的一种功能，用于在路由跳转过程中执行特定的逻辑操作 。这些操作可以包括权限验证、数据预加载、分析上报等 。Vue Router提供了三种类型的路由守卫，它们分别在不同的场景和生命周期钩子中被触发。

2、三种路由守卫是：

（1）全局守卫（Global Guards）‌：

①全局守卫影响所有的路由 ，通常用于执行全局性的前置或后置逻辑 。

②全局守卫包括beforeEach、beforeResolve（Vue Router 2.5.0+ 新增）和afterEach 。

-beforeEach在路由即将改变前被调用 ，可以用于权限检查或数据预加载。

-beforeResolve在全局守卫beforeEach和路由组件的beforeRouteEnter之后被调用 ，但在全局 afterEach之前 ，用于异步操作的解析。

-afterEach在路由改变之后被调用，通常用于分析上报或页面标题更新，不接收next函数，也不会改变导航本身。

（2）路由独享守卫（Route Guards）‌：

①路由独享守卫是针对单个路由定义的守卫，只影响该路由 。

②它只有一个beforeEnter守卫 ，与全局守卫的beforeEach类似，但只针对特定的路由。可以在路由配置中直接定义，用于处理特定路由的进入逻辑。

（3）组件内守卫（In-component Guards）‌：

①组件内守卫是在路由组件内部定义的守卫 ，只影响该组件。

②包括beforeRouteEnter、beforeRouteUpdate（Vue Router 2.2.0+ 新增）beforeRouteLeave。

-beforeRouteEnter在路由组件被渲染之前调用 ，不能访问组件实例this，但可以通过next的回调来访问。

-beforeRouteUpdate在当前路由改变但组件被复用时调用 ，如动态路由参数的变更。

-beforeRouteLeave在导航离开当前路由时调用，通常用于保存数据或询问用户是否确认离开。

3、代码示例：（main.js部分）

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

// 1. 全局守卫
// 全局前置守卫
router.beforeEach((to, from, next) => {
  console.log("全局前置守卫：从哪里来：", from);
  console.log("全局前置守卫：要去哪里：", to);
  next(); // 直接放行
});

// 全局解析守卫
router.beforeResolve((to, from, next) => {
  console.log("全局解析守卫：从哪里来：", from);
  console.log("全局解析守卫：要去哪里：", to);
  next();
});

// 全局后置钩子
router.afterEach((to, from) => {
  console.log("全局后置钩子：从哪里来：", from);
  console.log("全局后置钩子：去了哪里：", to);
});

// 2. 路由独享守卫
// 在路由配置上直接定义
const routeGuard = {
  path: '/exclusive',
  component: () => import('./components/Exclusive.vue'),
  beforeEnter: (to, from, next) => {
    console.log("路由独享守卫：从哪里来：", from);
    console.log("路由独享守卫：要去哪里：", to);
    next();
  }
};
router.addRoute(routeGuard);

// 3. 组件内守卫
// 在组件内部直接定义
const ExclusiveComponent = {
  template: '<div>Exclusive Component</div>',
  beforeRouteEnter(to, from, next) {
    console.log("组件内守卫 - 进入：从哪里来：", from);
    console.log("组件内守卫 - 进入：要去哪里：", to);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log("组件内守卫 - 更新：从哪里来：", from);
    console.log("组件内守卫 - 更新：要去哪里：", to);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("组件内守卫 - 离开：从哪里来：", from);
    console.log("组件内守卫 - 离开：要去哪里：", to);
    next();
  }
};

app.use(router)
app.component('ExclusiveComponent', ExclusiveComponent)
app.mount('#app')