本文发布于 2022-11-19， 最后更新于 1367 天前，其中的信息可能已经有所发展或是发生改变。
文章摘要
问题复现 当我在两个页面切换时，在 setup 函数的子函数里写了 const router = useRouter() ，想要以此实现跳转，结果 useRouter() 返回了 undefined ... script import { reactive } from 'vue' import { useRouter } from 'vue-router' export default { se…
问题复现 当我在两个页面切换时，在 setup 函数的子函数里写了 const router = useRouter() ，想要以此实现跳转，结果 useRouter() 返回了 undefined ... script import { reactive } from 'vue' import { useRouter } from 'vue-router' export default { setup(){ const versions = reactive({ ...window.electron.process.versions }) const backToHome=()= { const router = useRouter() router.push("/login") } return{ backToHome, versions } } } /script 或 script setup import { reactive } from 'vue' import { useRouter } from 'vue-router' const versions = reactive({ ...window.electron.process.versions }) const backToHome=()= { const router = useRouter() router.back() } /script 原理与解决 useRouter 和 useRoute 两个函数必须在 setup 函数中或者在 script setup 的顶层才会返回 router 和 route 对象 改成 script import { reactive } from 'vue' import { useRouter } from 'vue-router' export default { setup(){ const versions = reactive({ ...window.electron.process.versions }) const router = useRouter() const backToHome=()= { router.push("/login") } return{ backToHome, versions } } } /script 或 script setup import { reactive } from 'vue' import { useRouter } from 'vue-router' const versions = reactive({ ...window.electron.process.versions }) const router = useRouter() const backToHome=()= { router.back() } /script问题复现
当我在两个页面切换时，在setup函数的子函数里写了const router = useRouter()，想要以此实现跳转，结果useRouter()返回了undefined...
xml (Auto identified)
<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
export default {
setup(){
const versions = reactive({ ...window.electron.process.versions })
const backToHome=()=>{
const router = useRouter()
router.push("/login")
}
return{
backToHome,
versions
}
}
}
</script>
或
dust (Auto identified)
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const versions = reactive({ ...window.electron.process.versions })
const backToHome=()=>{
const router = useRouter()
router.back()
}
</script>
原理与解决
useRouter和useRoute两个函数必须在setup函数中或者在<script setup>的顶层才会返回router和route对象
改成
xml (Auto identified)
<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
export default {
setup(){
const versions = reactive({ ...window.electron.process.versions })
const router = useRouter()
const backToHome=()=>{
router.push("/login")
}
return{
backToHome,
versions
}
}
}
</script>
或
dust (Auto identified)
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const versions = reactive({ ...window.electron.process.versions })
const router = useRouter()
const backToHome=()=>{
router.back()
}
</script>
本文采用 CC BY-NC-SA 4.0 协议进行授权，如无注明均为原创，转载请注明出处。
标题：vue3.0路由函数useRouter异常作者：九仞之行链接：http://dev.styunlen.cn/archives/post-1523.html
还没有评论呢 ~ 快来抢沙发吧 🛋️