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 路由参考

4. useRouter && useRoute

useRouter 与 useRoute 都可以。

<template><button @click='goHome'>首页</button></template><script setup>// 1. 引入useRouter 或 useRouteimport {useRouter} from 'vue-router'// 2. 调用useRouter函数const $r = useRouter();// 注意： 在goHome前必须调用useRouter()函数// 否则在goHome函数里无法访问useRouterconst goHome = _ => {// 3. 使用useRouter$r.push({ path: '/' })};</script>