Vue-Router 基础使用-海口c网

Vue-Router 基础使用

article/2025/8/22 10:32:57

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')// 命名的路由，并加上参数，让路由建立 urlrouter.push({ name: 'user', params: { username: 'eduardo' } })router.go(1)
</script>