环境: Nuxt.js ,buefy
1、导航栏跳转
网站域名: http://example.com
将导航栏做成组件。点击每个栏目(home, stay, study)进行跳转,方法有多种,可以通过a标签,或者 , 此处我采用 事件进行路由跳转:
stay 与stay 共用同一份code文件(study 下的 index.vue),只是数据不同。
--layout
-- home.vue
--page
-- index.vue
-- study
-- index.vue
1、从home 跳转到 stay 或者 study
index.vue - http://example.com/
goto(id, name) {
this.activeId = categoryId;
this.$router.push({path: '/study',query:{id: id, name:name}})
}
跳转到页面
http://example.com/study
在study 的 created 阶段, 可以调用获取数据的函数(getData),获得数据然后渲染页面。浏览器中的URL变为: http://example.com/study?id=id&name=name
2、从study 跳到 stay
如果跳转只是按照上面的方式,将会出现: 路由跳转了http://example.com/stay?id=id&name=name,但是页面的数据还是study的数据(数据未刷新),即 getData没有被重新调用。
解决方法:
在 study/index.vue 添加路由监听:
watch: {
'$route' (to, from) {
// 监听路由变化
this.id = to.query.id;
this.name = to.query.name;
this.getData();
}
这样,页面之间跳转了, 数据也正常更新了。