router4 如何注册 router-link
时间: 2023-08-11 16:00:46 浏览: 52
在Vue Router 4中,`router-link`组件已经被废弃,取而代之的是`router-view`和`router-link`被重命名为`<RouterView>`和`<RouterLink>`。你可以按照以下步骤在Vue Router 4中注册和使用`<RouterLink>`组件:
1. 首先,确保你已经安装了Vue Router,并在你的项目中引入它:
```javascript
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// 路由配置
],
});
const app = createApp(App);
app.use(router);
app.mount('#app');
```
2. 在你的Vue组件中,使用`<RouterLink>`标签来创建路由链接。例如:
```vue
<template>
<div>
<RouterLink to="/home">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</div>
</template>
```
3. 如果你想要给链接添加CSS类名或其他属性,可以通过`v-bind`指令来绑定属性。例如:
```vue
<template>
<div>
<RouterLink to="/home" class="link">Home</RouterLink>
<RouterLink to="/about" :class="{ active: isActive }">About</RouterLink>
</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
```
以上就是在Vue Router 4中注册和使用`<RouterLink>`组件的方法。请注意,你需要将`<RouterLink>`标签包装在Vue组件的模板中,并根据需要设置路由链接的属性和样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)