vue3路由跳转的方式
1. 通过click事件跳转 $router.push([path])
- 如 : 有无this都行
$router.push('/plantduce')this.$router.push('/plantduce')
<div @click="$router.push('/plantduce')"></div>
<!-- 或者 -->
<!-- 或者 -->
<!-- 或者 -->
<div @click="this.$router.push('/plantduce')"></div>
2. 返回上一步 $router.back()
<button @click="this.$router.back()">我是小按钮</button>
<!-- 或者 -->
<!-- 或者 -->
<!-- 或者 -->
<button @click="$router.back()">我是小按钮</button>
3. router-link && router-view
<router-link to="/home">首页</router-link>
<router-view v-slot="{ Component }" :data="data" to="/home">
<component :is="Component"></component>
</router-view>
vue3 || vue2 路由参考文章来源：https://www.toymoban.com/news/detail-739144.html
4. useRouter && useRoute
useRouter 与 useRoute 都可以。文章来源地址https://www.toymoban.com/news/detail-739144.html
<template>
<button @click='goHome'>首页</button>
</template>
<script setup>
// 1. 引入useRouter 或 useRoute
import {useRouter} from 'vue-router'
// 2. 调用useRouter函数
const $r = useRouter();
// 注意： 在goHome前必须调用useRouter()函数
// 否则在goHome函数里无法访问useRouter
const goHome = _ => {
// 3. 使用useRouter
$r.push({ path: '/' })
};
</script>
到了这里，关于【vue3】vue3路由跳转的方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
