vue-router 导航到相同的路由并重新运行挂载钩子 [英] vue-router navigate to the same route and re-run mounted hook
问题描述
如何使用路由器链接导航到当前路由并重新运行挂载钩子?
HTML
<script src="https://unpkg.com/vue/dist/vue.min.js"></script><script src="https://unpkg.com/vue-router"></script><!-- 应用程序--><div id="应用程序"><导航><router-link :to="{ name: 'home' }" 准确的>首页</router-link><router-link :to="{ name: 'about' }" @click.native.prevent="router.push({ name: 'about' })">关于</router-link></nav><router-view :key="$route.fullPath"></router-view>JS
console.clear()console.log('是的！我们使用的是 Vue 版本', Vue.version)Vue.use(VueRouter)常量首页 = {模板:`<h1>家</h1>`，}const 关于 = {模板:`<h1>{{new Date()}}</h1>`，安装(){console.log('挂载')}}const 路由 = [{ path: '/', name: 'home', component: Home },{ path: '/about', name: 'about', 组件: About },]const 路由器 = 新的 VueRouter({路线，})//新建 VueJS 实例var app = new Vue({//根DOM元素的CSS选择器el: '#app',//将路由器注入应用程序路由器，})在上面的示例中，如果我导航到关于"，它会显示新日期的时间戳并记录已安装".但是，如果我已经在/about 上，单击 about 链接什么也不做.我想在点击关于"时重新运行整个组件生命周期，即使我已经点击了它.
每当用户单击您的关于页面时，您都需要更改 <router-view> 元素中的键，即将强制安装钩子:
<div id="应用程序"><router-link @click.native="updateViewKey" :to="{ name: 'about' }">关于</router-link><router-view :key="viewKey"></router-view></模板><脚本>导出默认{名称:应用程序"，数据() {返回 {视图键:1};},方法: {更新视图键(){this.viewKey+=1;}}};
How can I naviagte to the current route using router-link and re-run mounted hook?
HTML
<!-- Include the library in the page -->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router"></script>
<!-- App -->
<div id="app">
<nav>
<router-link :to="{ name: 'home' }" exact>Home</router-link>
<router-link :to="{ name: 'about' }" @click.native.prevent="router.push({ name: 'about' })">About</router-link>
</nav>
<router-view :key="$route.fullPath"></router-view>
</div>
JS
console.clear()
console.log('Yes! We are using Vue version', Vue.version)
Vue.use(VueRouter)
const Home = {
template: `<h1>Home</h1>`,
}
const About = {
template: `<h1>{{new Date()}}</h1>`,
mounted(){
console.log('mounted')
}
}
const routes = [
{ path: '/', name: 'home', component: Home },
{ path: '/about', name: 'about', component: About },
]
const router = new VueRouter({
routes,
})
// New VueJS instance
var app = new Vue({
// CSS selector of the root DOM element
el: '#app',
// Inject the router into the app
router,
})
In the above example, if I navigate to 'About' it shows the timestamp from new Date and logs 'mounted'. However, if I'm already on /about, clicking the about link does nothing. I want to re-run the whole component lifecycle when clicking 'About', even if I'm already hit it.
You'll need to change the key in the <router-view> element whenever the user clicks your about page, that will force the mounted hook:
<template>
<div id="app">
<router-link @click.native="updateViewKey" :to="{ name: 'about' }">About</router-link>
<router-view :key="viewKey"></router-view>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
viewKey: 1
};
},
methods: {
updateViewKey() {
this.viewKey+=1;
}
}
};
</script>
这篇关于vue-router 导航到相同的路由并重新运行挂载钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
