【vue3】vue3路由跳转的方式

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 或 useRoute
import {useRouter} from 'vue-router'

// 2. 调用useRouter函数
const $r = useRouter();

// 注意： 在goHome前必须调用useRouter()函数
// 否则在goHome函数里无法访问useRouter
const goHome = _ => {
  // 3. 使用useRouter
  $r.push({ path: '/' })
};
script>