Vue3中setup下的路由跳转

起跳页

html

<template>
  <div class="Page">
    <!-- 点击跳转 -->
    <button @click="tiaozhuan">点击进入详情</button>
    <!-- router-link跳转 -->
    <router-link to="detail">detail</router-link>
  </div>
</template>

js

<script>
import router from router路由的路径
export default {
          
   
  setup() {
          
   
    const tiaozhuan = () => {
          
   
      router.push(/detail)
    }

    return {
          
   
      tiaozhuan,
    }
  },
}
</script>

跳转页 html

<template>
  <div class="Page">
    <h1>详情页面</h1>
    <button @click="goback">返回上一页</button>
  </div>
</template>

js

<script>
export default {
          
   
  setup() {
          
   
    // 三选一
    const goback = () => {
          
   
      // 跳回指定的上一个页面
      router.push(/text)
      // 可以回到上一页
      router.go(-1) //推荐
      // 回到浏览器上一页
      history.go(-1)
    }
    return {
          
   
      goback,
    }
  },
}
</script>

也可以进行解构

<script>
import {
          
    useRouter } from vue-router

export default ({
          
   
  setup() {
          
   
     const router = useRouter()

    const goDetail = () => {
          
   
      router.push({
          
    path: 跳转路径 })
    }
    return {
          
   
      goDetail
    }
  }
})
</script>