Vue Router 是 Vue 官方的客户端路由解决方案。

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

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

1. 基础入门原理与示例

1.1. 初识Vue-Router

Vue-Router 是 Vue.js 官方的路由管理器，它能够创建单页应用 SPA，通过在应用中创建不同的视图和路径。

1.2. 安装与配置

使用npm安装： npm install vue-router

配置Vue-Router：

import Vue from 'vue';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(router);

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

const router = new VueRouter({
    routes
});

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

1.3. 基本示例

创建两个简单的组件并设置路由。

在Vue实例中使用 <router-view> 来显示路由对应的组件。

<div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
</div>

我们还可以在组件中通过访问实例，使用方法进行路由跳转。

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

如果是 Composition API，则可以使用如下方法。

<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>

2. 动态路由

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

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

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

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

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

2.1. 获取路由参数

获取路由参数的方式有几种，通常我们分为模板中获取和 JavaScript 逻辑中获取，分别为：

1. 在模板中消费参数

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
};

2. 在 JavaScript 中使用参数

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

  const route = useRoute()

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

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

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

const routes = [
  // 将匹配所有内容并将其放在 `route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

3. 路由嵌套

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

3.1. 配置嵌套路由

配置子路由如下：

const routes = [
  { 
    path: '/user/:id', 
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'posts',
        component: UserPosts
      }
    ]
  }
];

3.2. 使用嵌套路由组件

在父组件中使用 <router-view> 来显示子路由组件。

<div>
  <h2>User {{ $route.params.id }}</h2>
  <router-link to="profile">Profile</router-link>
  <router-link to="posts">Posts</router-link>
  <router-view></router-view>
</div>

3.3. 嵌套路由命名

嵌套路由可以进行命名，方便在后续使用中管理。

const routes = [
  {
    path: '/user/:id',
    component: User,
    // 请注意，只有子路由具有名称
    children: [{ path: '', name: 'user', component: UserHome }],
  },
]

4. 路由跳转

路由的跳转方式有很多种，总结如下：

RouterLink：

<RouterLink to="/about">Go to About</RouterLink>

实例方法跳转：

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

Composition API：

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

  const router = useRouter()

  router.push('/about')

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

  router.go(1)
</script>