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>
