vue3中路由跳转的方法
时间: 2023-10-09 21:16:29 浏览: 177
在Vue 3中,可以使用`router`对象来实现路由跳转。下面是几种常见的方法:
1. 使用`<router-link>`组件:`<router-link>`是Vue Router提供的组件,用于生成路由链接。可以在模板中使用它来创建跳转链接。例如:
```html
<router-link to="/about">About</router-link>
```
2. 使用`$router.push`方法:`$router`是Vue Router实例的引用,可以通过它调用路由跳转的方法。例如:
```javascript
// 在组件方法中使用
this.$router.push('/about');
// 在Vue Router实例外部使用
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [...]
});
router.push('/about');
```
3. 使用命名路由:如果你在定义路由时给路由规则指定了名称,可以使用名称来进行跳转。例如:
```javascript
// 在组件方法中使用
this.$router.push({ name: 'about' });
// 在Vue Router实例外部使用
router.push({ name: 'about' });
```
这些是Vue 3中常用的几种路由跳转方法,你可以根据自己的需求选择适合的方法。
相关推荐
![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_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)