vue命名视图实际作用（应用篇）

官方地址： https://router.vuejs.org/

GitHub: https://github.com/vuejs/router

1. 路由配置的完整指南：从创建 Vue Router 实例到定义路由映射和组件
2. Vue Router 导航深入解析：使用 <router-link> 创建导航链接和利用命名路由和命名视图
3. 动态路由参数详解：如何定义动态路由参数以及通过路由参数传递数据的实现
4. 实用技巧：监听路由参数变化以实现动态数据更新
5. 常见问题解答：解决路由配置、路由导航和动态路由方面的常见疑问

要创建 Vue Router 实例，你需要先安装 Vue Router，并在你的 Vue.js 项目中引入它。

** 以下是创建 Vue Router 实例的步骤：**

1. 使用 npm 或 yarn 安装 Vue Router：

npm install vue-router 或 yarn add vue-router

2. 在你的 Vue.js 项目中，创建一个新的 typeScripts文件（例如，router.ts）来定义你的路由器实例。
3. 在 router.ts 文件中，首先导入 Vue 和 Vue Router：

import Vue from 'vue'; import VueRouter from 'vue-router';

4. 使用 Vue.use()来安装 Vue Router 插件：

Vue.use(VueRouter);

5. 创建一个新的 Vue Router 实例：

const router = new VueRouter({ // 配置路由选项 });

在这里，你可以提供一些配置选项来定义你的路由规则、导航守卫等。你可以参考 Vue Router 的官方文档来了解更多配置选项的详细信息。

6. 导出你的 Vue Router 实例：

export default router

这将使你能够在项目的其他地方引入和使用这个路由器实例。

7. 在你的主 Vue 组件中，使用该实例：

在这里，你将 Vue Router 实例作为 router 选项传递给 Vue 的根实例。看下完整的示例：

import { createRouter, createWebHistory } from "vue-router"; const routes =[ { path: '/login', component: ()=>{ return import('../components/login.vue') } }, { path: '/reg', component: ()=> import('../components/reg.vue') } ]; const router = createRouter({ // 配置选项 history:createWebHistory(), routes:routes }); export default router;

import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')

现在你已经创建了 Vue Router 实例，并将其集成到你的 Vue.js 项目中。

你可以定义路由规则、配置导航守卫等，以实现你的路由功能。

Vue3 中的 Vue Router 的用法与 Vue 2 有一些不同。下面是在 Vue 3 中定义路由映射和组件的示例：

1. 在你的 router.ts 文件中，定义路由映射和组件：

import { createRouter, createWebHistory } from "vue-router"; import About from "../components/about.vue"; const routes = [ { path: "/about", name: "about", component: About, }, { path: "/login", name: "Login", component: () => { return import("../components/login.vue"); }, }, { path: "/reg", name: "Reg", component: () => import("../components/reg.vue"), }, ]; const router = createRouter({ // 配置选项 history: createWebHistory(), routes: routes, }); export default router;

2. 首先，我们使用 createRouter 和 createWebHistory 从 Vue Router 中导入所需的函数。createRouter 用于创建路由实例，而 createWebHistory 用于创建浏览器历史模式的路由。
3. 在 routes 数组中定义你的路由映射。每个路由对象仍然包含 path、name 和 component 属性，与 Vue 2 中的用法相同。
4. 使用 createRouter 函数创建路由实例。传递 createWebHistory() 作为 history 选项，以启用浏览器历史模式。
5. 将定义的路由映射数组 routes 作为路由选项中的 routes。
6. 导出你的 Vue Router 实例，以便在项目的其他地方使用。

export default router;

现在，在 Vue 3 中，你已经成功定义了路由映射和关联的组件。当用户访问特定的 URL 路径时，Vue Router 将加载相应的组件，并在你的应用程序中显示它们。请确保在 Vue 的主组件中使用此路由实例。

要配置 Vue Router 的路由规则和参数，你可以使用路由的 routes 配置项和动态路由参数。下面是一个示例，演示如何配置路由规则和使用参数：

1. 在你的 router.ts 文件中(修改上述中的内容)，配置路由规则和参数：

import { createRouter, createWebHistory } from "vue-router"; import User from "../components/user.vue"; const routes = [ { path: "/user/:id", name: "User", component: User, }, ]; const router = createRouter({ // 配置选项 history: createWebHistory(), routes: routes, }); export default router;

2. 在上面的示例中，我们定义了一些常规的路由规则，如 `'/'`、`'/about'` 和 `'/contact'`，对应于相应的组件。
3. 在路由规则中，我们还定义了一个带参数的路由规则 `'/user/:id'`。在这里，使用 `:` 冒号表示参数部分，参数名称为 `id`。这意味着任何形如 `/user/123` 的 URL 都会匹配到这个路由规则，并将参数传递给组件。
4. 我们还为该路由规则指定了一个名字 `user`，以便在程序中进行编程式导航时引用。
5. `User` 组件将接收到路由参数作为属性，你可以在组件中通过 `$route.params` 来访问它。例如，在 `User` 组件中，你可以通过 `$route.params.id` 来访问 `id` 参数。

现在，你已经配置了路由规则和参数。当用户访问特定的 URL 路径时，Vue Router 将匹配适当的路由规则，并将参数传递给相应的组件。你可以在组件中使用这些参数进行进一步的处理和显示。

要设置默认路由，即指定当用户访问你的应用程序的根路径时应显示的组件，你可以使用 Vue Router 的重定向功能。以下是设置默认路由的示例：在你的 `router.ts` 文件中，将根路径 `'/'` 重定向到你要显示的默认组件的路径。

import { createRouter, createWebHistory } from "vue-router"; import Home from "../components/home.vue"; const routes = [ { path: "/", name: "home", component: Home, }, ]; const router = createRouter({ // 配置选项 history: createWebHistory(), routes: routes, }); export default router;

在上述示例中，我们将根路径 '/' 的路由规则配置为重定向到 '/home'。这意味着当用户访问根路径时，Vue Router 会自动将其重定向到 /home 路径，并加载对应的 Home 组件。

你可以根据自己的需求将默认路由重定向到任何其他路径。这样，无论用户访问哪个路径作为根路径，都会显示你指定的默认组件。

使用 <router-link> 组件是一种声明式的方式来创建导航链接。它会自动为你生成正确的链接，并且会在用户点击链接时处理导航。以下是使用 <router-link> 创建导航链接的示例：

<template> <h1>vue-router 路由导航篇</h1> <div> <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-link :to="{ name: 'User', query: { id: 1 }}">User</router-link> <router-link to="/login">Login</router-link> <router-link to="/reg">Reg</router-link> </div> <hr /> <RouterView></RouterView> </template> <script setup lang="ts"> </script>

在上述示例中，我们在模板中使用 <router-link> 组件来创建导航链接。

• to 属性定义了链接的目标路径。你可以直接使用路径字符串（如 to="/home"）或者使用对象形式传递更多选项（如 :to="{ path: '/user', query: { id: 1 }}"）。
• 当用户点击链接时，Vue Router 会自动处理导航，并在应用程序中加载相应的组件。

你可以根据你的路由配置和需要，使用 <router-link> 创建多个导航链接，以便用户在应用程序中自由切换不同的路由。

在 Vue Router 中，你可以使用命名路由和命名视图来更方便地进行路由配置和视图显示。命名路由允许你为路由定义一个名称，以便在程序中引用，而命名视图允许你将多个视图关联到同一个路由。下面是如何使用命名路由和命名视图的示例：

1. 定义命名路由：

const routes = [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, // ... ];

在上述示例中，我们在路由配置中为每个路由定义了一个名称，如 'home' 和 'about'。这些名称将用于在程序中进行引用。

2. 使用命名路由进行导航：

<router-link :to="{ name: 'home' }">Home</router-link> <router-link :to="{ name: 'about' }">About</router-link>

在模板中，你可以使用 name 属性来指定要导航到的命名路由。这样，无论路由的路径是什么，都可以通过名称进行导航。

3. 定义命名视图：

const routes = [ { path: '/', components: { default: Home, sidebar: Sidebar, footer: Footer } }, // ... ];

在上述示例中，我们在路由配置中使用 components 对象来定义命名视图。这里的 default、sidebar 和 footer 是视图的名称，对应于组件的引用

4. 在组件中显示命名视图：

<template> <div> <router-view></router-view> <router-view name="sidebar"></router-view> <router-view name="footer"></router-view> </div> </template>

在组件的模板中，使用 <router-view> 组件来显示命名视图。你可以使用 name 属性来指定要显示的特定视图。

通过使用命名路由和命名视图，你可以更好地组织和控制你的路由和视图，并且在程序中进行导航和显示时更加灵活和方便。

动态路由是指在路由配置中使用参数来匹配不同的路径，以实现更灵活和动态的路由规则。通过动态路由，你可以根据不同的参数值加载不同的组件或显示不同的内容。

在 Vue.js 应用程序中，使用动态路由可以实现各种功能，如根据用户ID加载用户详情页、根据商品ID加载商品详情页等。以下是一些关于动态路由的重要概念：

1. 路由参数：在路由配置的路径中使用冒号 : 来定义参数。例如，/users/:id 中的 :id 表示一个参数，可以匹配不同的用户ID。
2. 参数传递：通过路由参数，你可以将参数值传递给组件。在组件中，可以通过 $route.params 来访问路由参数的值。
3. 监听参数变化：Vue Router 提供了 beforeRouteUpdate 导航守卫，用于监听路由参数的变化，并在参数变化时执行相应的逻辑。

通过使用动态路由，你可以根据不同的参数值动态加载对应的组件或显示不同的内容，实现更灵活和个性化的页面导航和展示。

在 Vue Router 中，你可以使用动态路由参数来匹配不同的路径并传递参数值给对应的组件。

以下是如何定义动态路由参数的示例：

const routes = [ { path: '/users/:id', name: 'user', component: User }, // ... ];

在上述示例中，我们定义了一个动态路由参数 :id，它会匹配 /users/ 后面的任意路径片段，并将该值作为参数传递给 User 组件。这样，当用户访问 /users/1 时，路由参数 id 的值将为 1。

你可以根据需要在路由路径中使用多个动态参数，例如：

const routes = [ { path: '/users/:category/:id', name: 'user', component: User }, // ... ];

在上述示例中，我们定义了两个动态路由参数 :category 和 :id，它们会匹配 /users/ 后面的路径片段，并将相应的值传递给 user 组件。

在组件中，你可以通过 $route.params 访问动态路由参数的值，例如：

import{ useRoute } from 'vue-router' const routeValue = useRoute(); console.log(routeValue.params.id)

或

export default { data(){return { userId:'' }}, mounted() { const userId = this.$route.params.id; // 使用动态路由参数值进行逻辑处理 console.log(userId) this.userId = userId } };

通过上述示例，你可以根据动态路由参数的值，在组件中执行相应的逻辑，如根据用户ID加载用户数据。这样，你可以根据不同的参数值来动态展示和处理不同的内容。

在 Vue Router 中，你可以通过路由参数来传递数据给目标组件。这样，在目标组件中就可以通过 $route.params 来访问这些路由参数的值。

以下是通过路由参数传递数据的示例：

1. 在路由配置中定义带参数的路由规则：

const routes = [ { path: '/user/:id', name: 'user', component: User }, // ... ];

在上述示例中，我们定义了一个名为 user 的路由规则，其中的 :id 表示一个参数。

2. 在触发路由导航时传递参数：

<router-link :to="{ name: 'user', params: { id: 1 }}">User 1</router-link> <router-link :to="{ name: 'user', params: { id: 2 }}">User 2</router-link>

在上述示例中，我们在 <router-link> 组件的 to 属性中使用 params 选项来传递参数。每个 <router-link> 对应不同的用户，并传递了不同的 id 参数值。

3. 在目标组件中获取参数值：

// javascript export default { mounted() { const userId = this.$route.params.id; // 使用路由参数值进行逻辑处理 // ... } }; // typeScript import{ useRoute } from 'vue-router' const routeValue = useRoute(); console.log(routeValue.params.id)

在目标组件的代码中，我们可以通过 this.$route.params 来访问路由参数的值。在这个示例中，我们获取了 id 参数的值，并在 mounted 钩子中进行了逻辑处理。

通过上述示例，你可以使用路由参数来传递数据给目标组件，并在目标组件中获取和使用这些数据。这种方式使得你可以根据不同的参数值加载不同的数据或执行不同的逻辑，以实现更灵活和个性化的页面展示和处理。

要监听路由参数的变化，你可以使用 Vue Router 提供的导航守卫（路由钩子函数）来实现。具体而言，你可以使用 beforeRouteUpdate 钩子函数来捕获路由参数的变化，并在参数变化时执行相应的逻辑。

以下是在 Vue 组件中监听路由参数变化的示例：

export default { beforeRouteUpdate(to, from, next) { // 获取新的路由参数值 const newUserId = to.params.id; // 获取旧的路由参数值 const oldUserId = from.params.id; // 执行相应的逻辑，比较参数值的变化等 // ... // 调用 next() 表示继续路由导航 next(); } };

在上述示例中，我们使用 beforeRouteUpdate 钩子函数来监听路由参数的变化。它接收三个参数：

• to：表示即将进入的目标路由对象
• from：表示当前导航正要离开的路由对象
• next：必须调用该函数来进入下一个钩子，可以传入参数用于修改导航行为

在 beforeRouteUpdate 钩子函数中，你可以比较新的路由参数值和旧的路由参数值，执行相应的逻辑处理。然后，通过调用 next() 来继续路由导航。

请注意，在监听路由参数变化时，beforeRouteUpdate 钩子函数只会在路由参数发生变化时被调用，而在组件首次加载时不会触发。如果你希望在组件首次加载时也执行相应的逻辑，请使用 mounted 钩子函数。

通过使用 beforeRouteUpdate 钩子函数，你可以灵活地响应路由参数的变化，并在变化发生时执行特定的逻辑。这样，你可以根据不同的参数值来更新组件状态、重新加载数据等。

问题：在路由配置中设置了重定向，但重定向不起作用。

解决方法：确保重定向配置的路径是正确的，并且目标路由存在。另外，如果重定向是动态的，可以使用函数返回目标路径。

问题：嵌套路由无法正确匹配和渲染子组件。

解决方法：确保父级路由配置中包含 <router-view> 组件用于渲染子路由。另外，确保子路由的 path 配置是相对于父路由的。

问题：无法获取到路由参数的值。

解决方法：在组件中使用 this.$route.params 来访问路由参数的值。另外，确保路由参数的名称在路由配置和组件中的访问代码中保持一致。

问题：导航守卫无法正确触发或逻辑无法按预期执行。

解决方法：确保导航守卫的钩子函数命名正确，如 beforeEach、beforeEnter、beforeLeave 等。另外，确保导航守卫中调用 next() 来继续导航或传入参数以改变导航行为。

问题：使用命名路由时，导航链接或编程式导航无法正确匹配到目标路由。

解决方法：确保在路由配置中给目标路由设置了正确的 name 属性，并在导航链接或编程式导航中使用正确的路由名称进行导航。

问题：使用路由懒加载时，组件无法正确加载或显示。

解决方法：确保使用正确的语法和路径配置路由懒加载。在 Vue 2 中，可以使用 import() 或 require.ensure 来异步加载组件。在 Vue 3 中，可以使用 () => import() 来异步加载组件。

问题：导航链接无法正确导航到目标路由。

解决方法：确保导航链接中的路径或路由名称与目标路由配置匹配。另外，如果使用动态路由参数，确保传递正确的参数值。

问题：通过编程式导航跳转路由无效。

解决方法：确保使用正确的导航方法进行编程式导航，例如 router.push()、router.replace() 或 router.go()。另外，确保传递正确的路径或路由对象作为导航目标。

问题：路由守卫无法阻止或控制导航行为。

解决方法：在路由守卫中使用 next() 方法来控制导航行为。可以使用 next() 继续导航，或者传递一个新的导航目标来修改导航行为。

问题：异步加载的路由组件无法正确加载或显示。

解决方法：确保异步加载的路由组件的导入路径或配置正确。另外，可以使用浏览器开发者工具查看网络请求和加载错误的具体信息。

问题：路由切换时没有显示预期的过渡动画。

解决方法：确保为路由视图组件添加了合适的过渡效果，并配置了正确的过渡类名或样式。另外，可以使用 Vue 的过渡钩子函数来自定义过渡动画逻辑。

问题：重复点击相同的导航链接或编程式导航时，路由重复触发。

解决方法：使用 router-link 组件时，可以通过添加 exact 属性来避免重复导航。对于编程式导航，可以在跳转之前检查当前路由是否已经处于目标路由，如果是，则不执行跳转。

问题：动态路由无法正确匹配到对应的组件。

解决方法：确保动态路由的路径匹配模式与组件的路径配置一致。检查动态路由的参数是否正确设置，并且在组件中正确获取和处理参数。

问题：动态路由参数的更新不会触发组件的重新渲染。

解决方法：在组件中使用 watch 或 beforeRouteUpdate 等功能来监听动态路由参数的变化，并在参数变化时执行相应的逻辑。

问题：嵌套的动态路由无法正确匹配和渲染子组件。

解决方法：确保父级动态路由和子级动态路由的路径配置正确，并在父级组件的模板中添加 <router-view> 组件用于渲染子级路由。

问题：无法正确传递动态路由参数给目标组件。

解决方法：在动态路由的路径配置中使用 :paramName 语法来指定参数名称，并在组件中使用 $route.params.paramName 来获取参数值。

问题：无法正确重定向到动态路由。

解决方法：在重定向的路由配置中，使用动态路由参数或函数来指定目标路由。

问题：动态路由可能会导致一些特定的路由缺失或覆盖问题。

解决方法：在路由配置中，确保动态路由的定义顺序正确，并优先匹配具体的路由路径，以避免路由冲突或缺失的问题。