您现在的位置是:首页 > 文章详情

VUE 路由参数动态变化,刷新页面动态变化

日期:2019-08-13点击:1195

VUE 路由参数动态变化,刷新页面路由参数动态变化,子组件获取路由参数

场景:响应路由参数变化,当使用路由参数时,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过组件的生命周期钩子不会再被调用。注意:使用 param 传参需要提供路由 name ,使用 query 传参需要提供路由 path 。

路由传参用到了编程式导航

// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})

复用组件时,对路由参数的变化作出响应,可以简单地 watch (监测变化) $route 对象:
router/index.js

const router = new Router({ mode: 'history', //去掉router中的#号 routes: [ { path: '/boss', name: 'boss', component: home, children: [{ path: 'index', component: bossIndex, name: 'bossIndex' }, { path: 'team/:id', component: bossTeam, name: 'bossTeam' }] }, { path: '/login', component: login, name: 'login' }, { path: '/404', component: NotFound, name: '', hidden: true }, { path: '*', redirect: '/404', hidden: true } ] })

parent.vue

 go: function (e, p) { if (e === '/boss/team') { this.$router.push({ name: 'bossTeam', params: { id: p } }) } else { this.$router.push(e) } }

child.vue

<template> <div class="boss-team">团{{ teamId }}</div> </template> <script> export default { name: "bossTeam", data () { return { teamId: null } }, created: function () { this.init() }, mounted: function () { }, watch: { '$route' (to, from) { this.init() } }, methods: { init () { var uid = this.$route.params.id this.teamId = uid console.log('详情页id = ' + uid) console.log(this.$route) } } } </script>

以上用 param 传参页面动态加载,除了这种方法也可以用 vuex 管理子组件的状态动态改变内容来实现
图一:
1565762057596
图二:
1565761973870

点击参考官方文档

原文链接:https://yq.aliyun.com/articles/714277
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章