`
vue-router` 是
Vue.js 应用中常用的路由管理
库，它允许你方便地在单页面应用 (SPA) 中导航。在
Vue 3 中，`router-
link`
组件是用于创建可点击的链接，当用户点击这些链接时，会根据路由规则跳转到相应的视图。
使用 `router-
link` 的基本步骤如下：
1. 首先，在你的
Vue 项目中，确保已经安装了 `
vue-router`，可以通过运行 `
npm install
vue-router` 或者 `yarn add
vue-router` 来添加。
2. 在你的
Vue 组件中，引入 `Router
Link`
组件：
```html
<template>
<router-
link :to="{ name: 'yourRouteName', params: { paramKey: 'paramValue' } }">
<!-- 这里是链接的文本或标签 -->
<a>导航到路由</a>
</router-
link>
</template>
```
- `:to` 属性用于设置链接的目标路由，可以是一个字符串（例如 `/user/:id`）或一个对象（如上面的例子所示，包含名称 `name` 和参数 `params`）。
- 如果你想传递动态参数，可以在 `params` 对象中指定，如 `:paramKey`。
3. 配置路由：
在 `src/router/index.js` 或 `src/router.ts` 中配置路由，包括定义路由名称、路径、
组件等：
```js
import { createRouter, createWebHistory } from '
vue-router';
import Home from '@/views/Home.
vue';
import User from '@/views/User.
vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/user/:id',
name: 'User',
//
使用 prop 传递动态参数给子
组件
props: true,
component: User,
},
];
const router = createRouter({
history: createWebHistory(), //
使用浏览器的历史记录 API
routes,
});
export default router;
```
4. 在 `router-view`
组件中，
Vue Router 会渲染匹配当前激活路由的
组件：
```html
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
```
相关问题：
1. 如何在 `router-
link` 中
使用通配符匹配动态路径？
2. 如何处理 `router-
link` 的点击事件以及重定向？
3.
Vue Router 的 `keep-alive` 功能如何与 `router-
link` 结合
使用？
4013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
