Vue3：路由

fulufulu
423 阅读20分钟

借用一下juejin.cn/post/719929… 帖子，补充一下路由的知识

参考信息

通过 Vue 可以实现多视图的单页 Web 应用（single page web application，SPA）。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue.js 路由需要载入 vue-router 库

中文文档地址：vue-router 文档。

一、入门

步骤一：创建路由器实例

Vue2：

image.png

Vue3: 路由器实例是通过调用 createRouter() 函数创建的:

image.png

步骤二：注册路由器插件

一旦创建了我们的路由器实例，我们就需要将其注册为插件，这一步骤可以通过调用 use() 来完成。

createApp(App)
  .use(router)
  .mount('#app')

或等价地：

const app = createApp(App)
app.use(router)
app.mount('#app')

和大多数的 Vue 插件一样，use() 需要在 mount() 之前调用。

如果你好奇这个插件做了什么，它的职责包括：

  1. 全局注册 RouterView 和 RouterLink 组件。

    组件 RouterView 和 RouterLink 都是全局注册的，因此它们不需要在组件模板中导入。但你也可以通过局部导入它们，例如 import { RouterLink } from 'vue-router'。

    在模板中，组件的名字可以是 PascalCase 风格或 kebab-case 风格的。Vue 的模板编译器支持两种格式，因此 <RouterView> 和 <router-view> 通常是等效的。此时应该遵循你自己项目中使用的约定。

    如果使用 DOM 内模板，那么需要注意：组件名字必须使用 kebab-case 风格且不支持自闭合标签。因此你不能直接写 <RouterView />，而需要使用 <router-view></router-view>。

  2. 添加全局 $router 和 $route 属性。

    在本教程中，我们常常以 router 作为路由器实例提及。即由 createRouter() 返回的对象。在应用中，访问该对象的方式取决于上下文。例如，在组合式 API 中，它可以通过调用 useRouter() 来访问。在选项式 API 中，它可以通过 this.$router 来访问。

    类似地，当前路由会以 route 被提及。基于不同 API 风格的组件，它可以通过useRoute()或 this.$route 来访问。

  3. 启用 useRouter() 和 useRoute() 组合式函数。

  4. 触发路由器解析初始路由。

步骤三：访问路由器和当前路由

在组件模板中，路由器实例将被暴露为 $router。这与同样被暴露的 $route 一样，但注意前者最后有一个额外的 r。

如果我们使用选项式 API，我们可以在 JavaScript 中如下访问这两个属性：this.$router 和 this.$route。

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    },
  },
}

这里调用了 push()，这是用于编程式导航的方法。我们会在后面详细了解。

对于组合式 API，我们不能通过 this 访问组件实例，所以 Vue Router 给我们提供了一些组合式函数。演练场示例中的 AboutView.vue 组件使用了这种方法：

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const search = computed({
  get() {
    return route.query.search ?? ''
  },
  set(search) {
    router.replace({ query: { search } })
  }
})
</script>

你现在不一定要完全理解这段代码，关键是要知道可以通过 useRouter() 和 useRoute() 来访问路由器实例和当前路由。

步骤四：使用RouterView 和 RouterLink 组件

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>

二、路由模式

image.png

Vue3 中不再使用 new Router() 创建 router ，而是调用 createRouter 方法：

import { createRouter } from 'vue-router'

const router = createRouter({
  // ...
})

路由模式 mode 配置改为 history ，属性值调整为：

  • "history" => createWebHistory()

    优点：URL更加美观，不带有#，更接近传统的网站URL。

    缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

  • "hash" => createWebHashHistory()

    优点：兼容性更好，因为不需要服务器端处理路径。

    缺点：URL带有#不太美观，且在SEO优化方面相对较差。

  • "abstract" => createMemoryHistory()

    Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。它是用 createMemoryHistory() 创建的，并且需要你在调用 app.use(router) 之后手动 push 到初始导航。

import { createRouter, createWebHistory } from 'vue-router'
// createWebHashHistory 和 createMemoryHistory (SSR相关) 同理

createRouter({
  history: createWebHistory(), //history模式
  // history:createWebHashHistory(), //hash模式
  routes: []
})

基础路径 base 被作为 createWebHistory 的第一个参数进行传递（其他路由模式也是一样）：

import { createRouter, createWebHistory } from 'vue-router'
createRouter({
  history: createWebHistory('/base-url/'),
  routes: []
})

三、路由跳转

① to的两种写法

<!-- 第一种：to的字符串写法 -->
<RouterLink to="/user">User</RouterLink>

<!-- 第二种：to的对象写法 -->
<RouterLink :to="{ path: '/user', query: { username: 'Jack' } }">User</RouterLink>
<!-- 第二种：（命名路由）直接通过名字跳转（to的对象写法配合name属性） -->
<RouterLink :to="{ name: 'user', params: { username: 'Tom' } }">User</RouterLink>

② 路由传参

第一个：query参数

1. 传递参数

<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">
	跳转
</router-link>
				
<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink 
  :to="{
    //name:'xiang', //用name也可以跳转
    path:'/news/detail',
    query:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  }"
>
  {{news.title}}
</RouterLink>

2. 接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)
第二个：params参数
  1. 传递参数
<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink 
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

2. 接收参数

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

备注2：传递params参数时，需要提前在规则中占位。

import { createRouter, createWebHistory } from 'vue-router';
import NewsDetail from '@/components/NewsDetail.vue';

const routes = [
  {
    path: '/news/detail/:id/:title/:content',
    name: 'xiang',
    component: NewsDetail,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
第三个：动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

import User from './User.vue'

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

现在像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

<template>
  <div>
    <!-- 当前路由可以通过 $route 在模板中访问 -->
    User {{ $route.params.id }}
  </div>
</template>

你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：

匹配模式匹配路径route.params
/users/:username/users/eduardo{ username: 'eduardo' }
/users/:username/posts/:postId/users/eduardo/posts/123{ username: 'eduardo', postId: '123' }

除了 route.params 之外，route 对象还公开了其他有用的信息，如 route.query（如果 URL 中存在参数）、route.hash 等。你可以在 API 参考中查看完整的细节。

响应路由参数的变化

使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。

要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

Composition API

<script setup>
import { watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

watch(() => route.params.id, (newId, oldId) => {
  // 对路由变化做出响应...
})
</script>

Options API

<script>
export default {
  created() {
    this.$watch(
      () => this.$route.params.id,
      (newId, oldId) => {
        // 对路由变化做出响应...
      }
    )
  },
}
</script>

或者，使用 beforeRouteUpdate 导航守卫，它还允许你取消导航：

Composition API

<script setup>
import { onBeforeRouteUpdate } from 'vue-router'
// ...

onBeforeRouteUpdate(async (to, from) => {
  // 对路由变化做出响应...
  userData.value = await fetchUser(to.params.id)
})
</script>

Options API

<script>
export default {
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
    this.userData = await fetchUser(to.params.id)
  },
  // ...
}
</script>

捕获所有路由或 404 Not found 路由

①匹配所有路径

常规参数只匹配 url 片段之间的字符，用 / 分隔。如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入 正则表达式 :

const routes = [
  // 将匹配所有内容并将其放在 `route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
]

在这个例子中：

  • /:pathMatch(.*)* 路径将匹配所有路径，并将匹配的内容放在 route.params.pathMatch 下。 pathMatch 是一个动态参数，(.*) 表示匹配任意字符（包括 /），这意味着 pathMatch 可以捕获路径中的任意部分。 *：表示匹配零次或多次

例如，当用户访问 /foo/bar 时，route.params.pathMatch 的值将是 "foo/bar"。

注意：

const routes = [
  // 其他路由配置
  { path: '*', redirect: '/404', hidden: true },
];

const routes = [
  // 其他路由配置
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
];

  • * 匹配所有路径：

    • 简单直接，适用于简单的重定向场景。
    • 无法访问未匹配的路径片段。
    • 主要用于重定向到 404 页面或其他固定路径。

  • /:pathMatch(.*)* 匹配所有路径：

    • 提供更大的灵活性，适用于需要处理或记录未匹配路径的场景。
    • 可以通过 route.params.pathMatch 访问未匹配的路径片段。
    • 适用于需要在组件中处理未匹配路径的场景。

②匹配指定路径

const routes = [
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]
  • /user-:afterUser(.*) 路径将匹配以 /user- 开头的所有路径，并将匹配的内容放在 route.params.afterUser 下。- 例如，当用户访问 /user-john/profile 时，route.params.afterUser 的值将是 "john/profile"。

在这个特定的场景中，我们在括号之间使用了自定义正则表达式，并将pathMatch 参数标记为可选可重复。这样做是为了让我们在需要的时候，可以通过将 path 拆分成一个数组，直接导航到路由：

const routes = [
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFound
  }
];

router.push({
  name: 'NotFound',
  // 保留当前路径并删除第一个字符，以避免目标 URL 以 `//` 开头。
  params: { pathMatch: this.$route.path.substring(1).split('/') },
  // 保留现有的查询和 hash 值，如果有的话
  query: route.query,
  hash: route.hash,
})

在这个例子中：

  • name: 'NotFound' 指定了要导航到的路由名称。
  • params: { pathMatch: this.$route.path.substring(1).split('/') } 将当前路径拆分成一个数组，并作为 pathMatch 参数传递。例如 /example/path。 this.$route.path.substring(1) 删除路径的第一个字符 /，结果是 example/path。this.$route.path.substring(1).split('/') 将路径字符串按 / 分割成数组，结果是 ['example', 'path']。
  • query: this.$route.query 和 hash: this.$route.hash 保留了现有的查询参数和哈希值。
第四个：路由的匹配语法

具体细节参考：router.vuejs.org/zh/guide/es…

③ 路由组件传参：将 props 传递给路由组件

在你的组件中使用 $route 或 useRoute() 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props 配置来解除这种行为：

回到我们之前的示例：

<!-- User.vue -->
<template>
  <div>
    User {{ $route.params.id }}
  </div>
</template>

和：

import User from './User.vue'

// 传入 `createRouter`
const routes = [
  { path: '/users/:id', component: User },
]

我们可以通过声明 prop 来在 User.vue 中删除对 $route 的直接依赖：

Composition API写法：

<!-- User.vue -->
<script setup>
defineProps({
  id: String
})
</script>

<template>
  <div>
    User {{ id }}
  </div>
</template>

Options API写法：

<!-- User.vue -->
<script>
export default {
  props: {
    id: String
  }
}
</script>

<template>
  <div>
    User {{ id }}
  </div>
</template>

然后我们可以通过设置 props: true 来配置路由将 id 参数作为 prop 传递给组件：

const routes = [
  { path: '/user/:id', component: User, props: true }
]

这允许你在任何地方使用该组件，使得该组件更容易重用和测试。

其他 props 配置模式

(1)布尔模式

当 props 设置为 true 时，route.params 将被设置为组件的 props。

(2)命名视图

对于有命名视图的路由，你必须为每个命名视图定义 props 配置：

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

接下来顺便详细介绍命名视图：

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<router-view class="view left-sidebar" name="LeftSidebar" />
<router-view class="view main-content" />
<router-view class="view right-sidebar" name="RightSidebar" />

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写
        LeftSidebar,
        // 它们与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],
})
(3)对象模式

当 props 是一个对象时，它将原样设置为组件 props。当 props 是静态的时候很有用。

路由配置：
const routes = [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false }
  }
]

在路由配置中，props 被设置为一个对象 { newsletterPopup: false }。这意味着当路径匹配 /promotion/from-newsletter 时，Promotion 组件将接收到一个名为 newsletterPopup 的 prop，其值为 false。

组件定义：
<!-- filepath: /d:/myproject/安全运营/wlaqyyglpt-bigscreen/src/components/Promotion.vue -->
<template>
  <div>
    <h1>Promotion Page</h1>
    <p v-if="newsletterPopup">This is a special promotion for newsletter subscribers!</p>
    <p v-else>This is a general promotion.</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  newsletterPopup: {
    type: Boolean,
    default: false
  }
});
</script>

在 Promotion 组件中，通过 defineProps 声明 newsletterPopup prop，并设置其类型为 Boolean，默认值为 false。在模板中，根据 newsletterPopup 的值显示不同的内容。

(4)函数模式

你可以创建一个返回 props 的函数。这允许你将参数转换为其他类型，将静态值与基于路由的值相结合等等。

路由配置
const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q })
  }
]

在路由配置中，props 被设置为一个函数。这个函数接收当前的 route 对象，并返回一个包含 query 属性的对象。query 属性的值是从 route.query.q 中获取的。

组件定义
<template>
  <div>
    <h1>Search Results</h1>
    <p>Query: {{ query }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  query: {
    type: String,
    required: true
  }
});
</script>

在 SearchUser 组件中，通过 defineProps 声明 query prop，并设置其类型为 String，且为必需。在模板中，显示传递过来的 query 值。

URL /search?q=vue 将传递 {query: 'vue'} 作为 props 传给 SearchUser 组件。

请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 vue 才可以对状态变化做出反应。

(5)通过 RouterView

你还可以通过 <RouterView> 插槽 传递任意参数：

<RouterView v-slot="{ Component }">
  <component
    :is="Component"
    view-prop="value"
   />
</RouterView>

在这种情况下，所有视图组件都会接收到 view-prop。通常这并不是一个好主意，因为这意味着所有的视图组件都声明了一个 view-prop prop，但这未必需要。所以请尽可能使用上述的其他选项。

④ 编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

(1)导航到不同的位置

注意: 下面的示例中的 router 指代路由器实例。在组件内部，你可以使用 $router 属性访问路由，例如 this.$router.push(...)。如果使用组合式 API，你可以通过调用 useRouter() 来访问路由器。

想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...) ：

声明式编程式
<router-link :to="...">router.push(...)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path ：

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

当指定 params 时，可提供 string 或 number 参数（或者对于可重复的参数可提供一个数组）。任何其他类型（如对象、布尔等）都将被自动字符串化。对于可选参数，你可以提供一个空字符串（""）或 null 来移除它。

由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。

router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。

(2)替换当前位置

作用：控制路由跳转时操作浏览器历史记录的模式。

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

声明式编程式
<router-link :to="..." replace>router.replace(...)

也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
(3)横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)。

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
(4)篡改历史

你可能已经注意到，router.push、router.replace 和 router.go 是 window.history.pushState、window.history.replaceState 和 window.history.go 的翻版，它们确实模仿了 window.history 的 API。

因此，如果你已经熟悉 Browser History APIs，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。

值得一提的是，无论在创建路由器实例时传递什么 history 配置，Vue Router 的导航方法 (push、replace、go) 都能始终正常工作。

四、嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：

/user/johnny/profile                   /user/johnny/posts 
┌──────────────────┐                  ┌──────────────────┐
│ User             │                  │ User             │
│ ┌──────────────┐ │                  │ ┌──────────────┐ │
│ │ Profile      │ │  ●────────────▶  │ │ Posts        │ │
│ │              │ │                  │ │              │ │
│ └──────────────┘ │                  │ └──────────────┘ │
└──────────────────┘                  └──────────────────┘

通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。

接着上节创建的 app ：

<!-- App.vue -->
<template>
  <router-view />
</template>

这里的 <router-view> 是一个顶层的 router-view。它渲染顶层路由匹配的组件。同样地，一个被渲染的组件也可以包含自己嵌套的 <router-view>。例如，如果我们在 User 组件的模板内添加一个 <router-view>：

<!-- User.vue -->
<template>
  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <router-view />
  </div>
</template>

要将组件渲染到这个嵌套的 router-view 中，我们需要在路由中配置 children：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // 当 /user/:id/profile 匹配成功
        // UserProfile 将被渲染到 User 的 <router-view> 内部
        path: 'profile',
        component: UserProfile,
      },
      {
        // 当 /user/:id/posts 匹配成功
        // UserPosts 将被渲染到 User 的 <router-view> 内部
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。

如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图。

此时，按照上面的配置，当你访问 /user/eduardo 时，在 User 的 router-view 里面什么都不会呈现，因为没有匹配到嵌套路由。也许你确实想在那里渲染一些东西。在这种情况下，你可以提供一个空的嵌套路径：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // 当 /user/:id 匹配成功
      // UserHome 将被渲染到 User 的 <router-view> 内部
      { path: '', component: UserHome },

      // ...其他子路由
    ],
  },
]

五、重定向和别名

① 重定向

重定向也是通过 routes 配置来完成，下面例子是从 /home 重定向到 /：

const routes = [{ path: '/home', redirect: '/' }]

重定向的目标也可以是一个命名的路由：

const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

甚至是一个方法，动态返回重定向目标：

const routes = [
  {
    // /search/screens -> /search?q=screens
    path: '/search/:searchText',
    redirect: to => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: '/search', query: { q: to.params.searchText } }
    },
  },
  {
    path: '/search',
    // ...
  },
]

请注意，导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。在上面的例子中，在 /home 路由中添加 beforeEnter 守卫不会有任何效果。

在写 redirect 的时候，可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。当你为一个路由配置了 redirect 属性时，这个路由本身不会直接渲染任何组件。相反，它会立即重定向到目标路径，并匹配目标路径的路由配置。因此，重定向路径本身不需要渲染任何组件，也就不需要 component 配置。

唯一的例外是嵌套路由：如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

②相对重定向

也可以重定向到相对位置：

const routes = [
  {
    // 将总是把/users/123/posts重定向到/users/123/profile。
    path: '/users/:id/posts',
    redirect: to => {
      // 该函数接收目标路由作为参数
      // 相对位置不以`/`开头
      // 或 { path: 'profile'}
      return 'profile'
    },
  },
]

③别名

在 Vue Router 中，别名（alias）允许你为一个路径定义多个 URL。当用户访问别名路径时，URL 仍然显示为别名路径，但会被匹配为原始路径。这与重定向不同，重定向会改变 URL，而别名不会。

第一种情况：

重定向是指当用户访问 /home 时，URL 会被 / 替换，然后匹配成 /。那么什么是别名呢？

将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /。

上面对应的路由配置为：

const routes = [{ path: '/', component: Homepage, alias: '/home' }]

在这个例子中，当用户访问 /home 时，URL 仍然显示为 /home，但会被匹配为 / 路径，渲染 Homepage 组件。

第二种情况：

通过别名，你可以自由地将 UI 结构映射到一个任意的 URL，而不受配置的嵌套结构的限制。使别名以 / 开头，以使嵌套路径中的路径成为绝对路径。你甚至可以将两者结合起来，用一个数组提供多个别名：

const routes = [
  {
    path: '/users',
    component: UsersLayout,
    children: [
      // 为这 3 个 URL 呈现 UserList
      // - /users
      // - /users/list
      // - /people
      { path: '', component: UserList, alias: ['/people', 'list'] },
    ],
  },
]

在这个例子中，当用户访问 users、/users/list 或 /people 时，都会渲染 UserList 组件。

  1. users 路径：

    • 当用户访问 users 时，URL 显示为 users。
    • 由于子路由的 path 是空字符串 ''，它会匹配 users 路径。
    • 因此，UserList 组件会被渲染。

  2. /users/list 路径：

    • 当用户访问 /users/list 时，URL 显示为 /users/list。
    • 由于子路由的 alias 包含 'list'，它会匹配 /users/list 路径。
    • 因此，UserList 组件会被渲染。

  3. /people 路径：

    • 当用户访问 /people 时，URL 显示为 /people。
    • 由于子路由的 alias 包含 '/people'，它会匹配 /people 路径。
    • 因此，UserList 组件会被渲染。
第三种情况：

如果你的路由有参数，请确保在任何绝对别名中包含它们：

const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]

在这个例子中，当用户访问 /users/24、/users/24/profile 或 /24 时，都会渲染 UserDetails 组件。

  1. /users/24 路径：

    • 当用户访问 /users/24 时，URL 显示为 /users/24。
    • 由于父路由的 path 是 /users/:id，它会匹配 /users/24 路径。
    • 子路由的 alias 包含 /:id，它会匹配 /users/24 路径。
    • 因此，UserDetails 组件会被渲染。

  2. /users/24/profile 路径：

    • 当用户访问 /users/24/profile 时，URL 显示为 /users/24/profile。
    • 由于子路由的 path 是 'profile'，它会匹配 /users/24/profile 路径。
    • 因此，UserDetails 组件会被渲染。

  3. /24 路径：

    • 当用户访问 /24 时，URL 显示为 /24。
    • 由于子路由的 alias 包含 /:id，它会匹配 /24 路径。
    • 因此，UserDetails 组件会被渲染。

关于 SEO 的注意事项: 使用别名时，一定要定义规范链接.

六、匹配当前路由的链接

活跃链接

在应用程序中，通常会有一个导航组件，该组件渲染一系列 RouterLink 组件。在这些链接中，我们可能希望将当前活跃路由的链接样式与其他链接区分开来。

RouterLink 组件

RouterLink 组件会为活跃链接添加两个 CSS 类：router-link-active 和 router-link-exact-active。要理解它们之间的区别，首先需要了解 Vue Router 如何判断一个链接是活跃的。

链接何时活跃？

一个 RouterLink 被认为是活跃的条件如下：

  1. 它与当前路径匹配相同的路由记录（即配置的路由）。
  2. 它的 params 值与当前路径的 params 值相同。

注意：

  • 如果你使用嵌套路由，指向祖先路由的任何链接也会被认为是活跃的，只要相关的 params 匹配。

  • 其他路由属性（如 query）不会被考虑在内。

  • 路径不一定需要完全匹配。例如，使用别名时，只要它解析到相同的路由记录和 params，也会被认为是匹配的。

  • 如果一个路由有重定向，在检查链接是否活跃时不会跟随重定向。

精确活跃链接

精确匹配不包括祖先路由。

假设我们有以下路由配置：

const routes = [
  {
    path: '/user/:username',
    component: User,
    children: [
      {
        path: 'role/:roleId',
        component: Role,
      }
    ]
  }
]

然后考虑以下两个链接：

<RouterLink to="/user/erina">
  User
</RouterLink>
<RouterLink to="/user/erina/role/admin">
  Role
</RouterLink>

如果当前路径是 /user/erina/role/admin，那么这两个链接都会被认为是活跃的，因此 router-link-active 类会应用于这两个链接。但只有第二个链接会被认为是精确匹配的，因此只有第二个链接会有 router-link-exact-active 类。

配置类名

RouterLink 组件有两个属性：activeClass 和 exactActiveClass，可以用来更改应用的类名：

<RouterLink
  activeClass="border-indigo-500"
  exactActiveClass="border-indigo-700"
  ...
>

默认的类名也可以通过传递 linkActiveClass 和 linkExactActiveClass 选项给 createRouter() 来全局更改：

const router = createRouter({
  linkActiveClass: 'border-indigo-500',
  linkExactActiveClass: 'border-indigo-700',
  // ...
})

七、导航守卫（进阶）

(1)全局前置守卫

全局前置守卫通常用来做权限控制，使用 router.beforeEach 即可添加：

javascript
 代码解读
复制代码
const router = createRouter({ ... })

router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

每个守卫方法接收两个参数：

  • to：即将进入的目标路由
  • from：当前正要离开的路由

可以返回的值如下:

  • false：取消当前的导航。
  •  true 或 undefined，调用下一个守卫。
  • 一个路由地址：字符串或对象。表示中断当前导航，进行一个新的导航。
 router.beforeEach(async (to, from) => {
   // 检查用户是否已登录，并且避免无限重定向
   if (!isAuthenticated && to.name !== 'Login') {
     return { name: 'Login' } // 将用户重定向到登录页面
   }
 })

在之前的 Vue Router 版本中，也是可以使用第三个参数 next 的。目前，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。在这种情况下，要确保 next 在导航守卫中只被调用一次。

(2)全局解析守卫

router.beforeResolve 用法和 router.beforeEach 类似。它是在导航被确认之前，所有组件内守卫和异步路由组件被解析之后被调用。下面这个例子，确保用户可以访问自定义 meta 属性：

router.beforeResolve(async to => {
  if (to.meta.requiresCamera) {
    try {
      await askForCameraPermission()
    } catch (error) {
      if (error instanceof NotAllowedError) {
        // ... 处理错误，然后取消导航
        return false
      } else {
        // 意料之外的错误，取消导航并把错误传给全局处理器
        throw error
      }
    }
  }
})

router.beforeResolve 是获取数据或执行任何其他操作（进入所有页面后都执行的操作）的理想位置。

(3)全局后置钩子

和守卫不同的是，全局后置钩子不接受 next 函数，也不能跳转到其他的路由地址：

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})

但它可以接收 failure 作为第三个参数：

router.afterEach((to, from, failure) => {
  if (!failure) sendToAnalytics(to.fullPath)
})

router.afterEach 对于访问分析、更改页面标题、声明页面等辅助功能都很有帮助。

(4)路由独享的守卫

我们可以直接在路由配置上定义 beforeEnter 守卫：

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
      // 取消导航
      return false
    },
  },
]

beforeEnter 守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects 不会触发。

我们也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：

// 清除 query 参数
function removeQueryParams(to) {
  if (Object.keys(to.query).length)
    return { path: to.path, query: {}, hash: to.hash }
}
// 清除 hash 值
function removeHash(to) {
  if (to.hash) return { path: to.path, query: to.query, hash: '' }
}

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: [removeQueryParams, removeHash]
  },
  {
    path: '/about',
    component: UserDetails,
    beforeEnter: [removeQueryParams]
  }
]

当然，你也可以通过使用路由的 meta 属性和 全局导航守卫 来实现以上功能。

(5)组件内的守卫

使用声明式 API ，你可以为组件添加以下守卫：

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

beforeRouteEnter 守卫不能访问 this，因为此时组件还没有被创建。你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意：beforeRouteEnter 是支持 next 传递回调函数的唯一守卫。

beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用。比如，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候被调用。因为这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this。

beforeRouteUpdate (to, from) {
  // 可以使用 this
  this.name = to.params.name
}

beforeRouteLeave 通常用来预防用户在还未保存修改前突然离开。该守卫可以通过返回 false 来取消导航。

beforeRouteLeave (to, from) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  // 取消导航并停留在当前页面
  if (!answer) return false
}

使用组合式 API，你可以为组件添加 onBeforeRouteUpdate 、onBeforeRouteLeave 导航守卫：

<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

const userData = ref()

onBeforeRouteUpdate(async (to, from) => {
  //仅当 id 更改时才获取用户信息
  if (to.params.id !== from.params.id) {
    userData.value = await fetchUser(to.params.id)
  }
})

onBeforeRouteLeave((to, from) => {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  // 取消导航并停留在当前页面
  if (!answer) return false
})
</script>

注意：由于 setup 函数调用时机的问题，使用组合式 API 不存在 onBeforeRouteEnter。

八、路由元信息（进阶）

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到。定义路由的时候你可以这样配置 meta 字段：

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true },
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false },
      }
    ]
  }
]

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，它可能匹配多个路由记录。

例如，根据上面的路由配置，/posts/new 这个 URL 将会匹配父路由记录 (path: '/posts') 以及子路由记录 (path: 'new')。

一个路由匹配到的所有路由记录会暴露为 route 对象(还有在导航守卫中的路由对象)的route.matched 数组。我们需要遍历这个数组来检查路由记录中的 meta 字段，但是 Vue Router 还为你提供了一个 route.meta 方法，它是一个非递归合并所有 meta 字段（从父字段到子字段）的方法。这意味着你可以简单地写

router.beforeEach((to, from) => {
  // 而不是去检查每条路由记录
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，则重定向到登录页面
    return {
      path: '/login',
      // 保存我们所在的位置，以便以后再来
      query: { redirect: to.fullPath },
    }
  }
})

九、滚动行为（进阶）

我们可以通过 vue-router 自定义路由切换时页面如何滚动。比如，当跳转到新路由时，页面滚动到某个位置；切换路由时页面回到之前的滚动位置。

当创建路由实例时，我们只需要提供一个 scrollBehavior 方法：

const router = createRouter({
  history: createWebHashHistory(),
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 函数接收 to和 from 路由对象。第三个参数savedPosition，只有当这是一个 popstate 导航时才可用（点击浏览器的后退/前进按钮，或者调用 router.go() 方法）。

滚动到固定距离

该函数可以返回一个 ScrollToOptions 位置对象：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终滚动到顶部
    return { top: 0 }
  },
})

滚动到元素位置

也可以通过 el 传递一个 CSS 选择器或一个 DOM 元素。在这种情况下，top 和 left 将被视为该元素的相对偏移量。

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    // 始终在元素 #main 上方滚动 10px
    return {
      // 也可以这么写
      // el: document.getElementById('main'),
      el: '#main',
      top: -10,
    }
  },
})

滚动到锚点位置

还可以模拟 “滚动到锚点” ：

js
 代码解读
复制代码
const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
      }
    }
  },
})

滚动到之前的位置

返回 savedPosition，在按下浏览器 后退/前进 按钮，或者调用 router.go() 方法时，页面会回到之前的滚动位置：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

提示：如果返回一个 falsy 的值，或者是一个空对象，则不会发生滚动。我们还可以在返回的对象中添加 behavior: 'smooth' ，让滚动更加丝滑。

延迟滚动

有时候，我们不希望立即执行滚动行为。例如，当页面做了过渡动效，我们希望过渡结束后再执行滚动。要做到这一点，我们可以返回一个 Promise ：

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ left: 0, top: 0 })
      }, 500)
    })
  }
})

十、过渡动效（进阶）

基本用法

如果想要在路由组件上使用转场，对导航进行动画处理，我可以使用 v-slot 结合 Animete.css 来实现：

<RouterView v-slot="{ Component }">
  <transition enter-active-class="animate__animated animate__fadeIn">
    <component :is="Component" />
  </transition>
</RouterView>

单个路由的过渡

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，可以将 元信息 和动态的 enter-active-class 结合在一起，放在<transition> 上：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { transition: 'animate__fadeIn' },
  },
  {
    path: '/user',
    component: User,
    meta: { transition: 'animate__bounceIn' },
  },
]

<RouterView v-slot="{ Component }">
  <transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
    <component :is="Component" />
  </transition>
</RouterView>

复用的组件之间进行过渡

const routes = [
  {
    path: '/user/:id',
    component: User,
    meta: { transition: 'animate__bounceIn' },
  },
]

定义以上路由，当从 /user/123 切换到 /user/456 时是没有任何过渡效果的。这时候我们可以添加一个 key 属性来强制进行过渡，key 值只要不同就行了。说白了就是让 Dom 不要被复用，和 v-for 的 key 属性原理刚好相反。

<router-view v-slot="{ Component, route }">
  <transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>

十一、动态路由（进阶）

添加路由

当我们做用户权限的时候，添加路由非常有用。可以使用 router.addRoute() 来添加一个路由：

router.addRoute({ path: '/about', name: 'about', component: About })

注意：跟之前版本不同的是，路由只能一个一个添加，不能批量添加。

删除路由

以下几个方法都可以删除路由：

  • 通过使用 router.removeRoute() 按名称删除路由：

    router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

  • 通过添加一个名称相同的路由，替换掉之前的路由：

    router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

  • 通过调用 router.addRoute() 返回的回调函数：

    const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

    当路由没有名称时，这种方法非常有用。

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute() ，这和通过 children 添加的效果一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
// 添加嵌套路由
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这相当于：

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }]
})
avatar
文章
阅读
粉丝