Vue3中setup下的路由跳转

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>