router 路由跳转网页
时间: 2023-07-11 21:14:35 浏览: 69
在使用 Vue Router 进行路由跳转时,可以使用以下方式:
1. 使用 `<router-link>` 标签进行跳转,该标签会自动将路径转换为 `<a>` 标签,并添加相应的事件监听。示例代码如下:
```
<template>
<div>
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>
</div>
</template>
```
2. 在组件中使用 `this.$router.push()` 方法进行跳转,该方法接收一个路径或包含路径信息的对象。示例代码如下:
```
<template>
<div>
<button @click="goToHome">Go to Home</button>
<button @click="goToAbout">Go to About</button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
methods: {
goToHome() {
this.$router.push({ name: 'home' });
},
goToAbout() {
this.$router.push({ name: 'about' });
}
}
}
</script>
```
在上面的代码中,我们在组件中定义了两个方法,分别调用了 `this.$router.push()` 方法来进行路由跳转。
需要注意的是,在进行路由跳转时,需要先在 Vue Router 中定义好相应的路由规则,才能进行跳转。否则会出现路由不匹配的错误。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)