刷新页面后this.$route.params 为空
个人博客：刷新页面后this.$route.params 为空
深度学习vue-router时，按官方文档的教程看下来，结果发现刷新页面后，打印的this.$route.params为空
Vue2
问题复现
路由配置：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
redirect: '/home'
},
{
path: "/home",
name: "Home",
component: () => import("../components/Home.vue")
},
{
path: "/user/:id",
name: "User",
component: () => import("../components/User.vue")
}
]
})
export default router
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
created() {
console.log(this.$route.params)
}
}
</script>
解决方案
1. 在导航守卫中获取
router.beforeEach((to, from, next) => {
console.log(to.params)
next()
})
2. 在跳转后的页面获取，而不是在app.vue中获取
User.vue
<template>
<h2>User</h2>
</template>
<script>
export default {
created() {
console.log(this.$route.params)
}
}
</script>
<style scoped>
h2 {
color: purple;
}
</style>
3. 在updated生命周期钩子中获取(可能实际开发用不上)
为什么会出这个问题呢？
以下是个人现阶段的理解。(可能有误)
结论：此时打印this.$route.params应该在updated生命周期钩子中打印
首先先在created和mounted钩子中打印this.$route看一下情况。
发现，信息不符合。猜测可能是组件创建、渲染阶段时，路由还没有跳转，所以打印的信息不对。路由跳转后，修改数据this.$route是在数据更新阶段，所以获取最新的路由信息应该在updated中获取。
问题解决
Vue3
首先，路由配置也不太一样
import { createRouter, createWebHashHistory } from "vue-router"
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: "/home",
name: "Home",
component: () => import("../components/Home.vue")
},
{
path: "/user/:id",
name: "User",
component: () => import("../components/User.vue")
}
]
const router = new createRouter({
history: createWebHashHistory(),
routes
})
export default router
解决方案
1. 在导航守卫中获取
和Vue2的相同。
2. 在跳转后的页面获取，而不是在app.vue中获取
这个在开发中用到的可能性还大一些。毕竟开发时每个页面都需要路由信息的很少，都需要的话就可以采用上面在导航守卫中获取的做法
User.vue
<template>
<h2>User</h2>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { onUpdated } from 'vue'
const route = useRoute()
console.log(route.params)
</script>
<style scoped>
h2 {
color: purple;
}
</style>
效果和上图一样
3. 强行实现(不建议)
Vue3中，针对Vue2的解决方案3不再有效。在Vue3中，路由的变化不再属于是数据的更新，所以也不会触发onUpdated钩子
app.vue
<template>
<router-link to="/home">首页</router-link>
<router-view></router-view>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { onUpdated } from 'vue'
const route = useRoute()
// console.log(route.params)
onUpdated(() => {
console.log(route.params)
})
</script>
那么怎么解决呢？
这个只是个人学习时，想到的暴力法。(现在也只会这个暴力法，开发时应该是嗤之以鼻的做法)
app.vue
<template>
<router-view></router-view>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { onUpdated } from 'vue'
const route = useRoute()
setTimeout(() => {
console.log(route.params)
}, 200)
</script>
效果还是同上
最后的坑(又能解释的希望评论告知)
app.vue
<template>
params: {{ route.params }}
<router-view></router-view>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { onUpdated } from 'vue'
const route = useRoute()
console.log(route)
console.log(route.params)
</script>
