VUE 路由参数动态变化,刷新页面动态变化
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 管理子组件的状态动态改变内容来实现
图一:
图二:

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
VUE+ElementUI更改导航菜单选中背景颜色
VUE+ElementUI更改导航菜单选中背景颜色 主要是设置 .el-menu-item.is-active 选择器的样式属性 官方文档中提供background-color、text-color、active-text-color三种属性 仅提供了激活菜单文字颜色,并没有提供激活菜单的其他参数 <el-menu default-active="0" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="collapsed" background-color="#fff" text-color="#777F8F" active-text-color="#6681FA"> 使用提供的属性,并设置 .el-menu-item.is-active 样式可以看到我们使用了提供的参数之后,是JS直接更改了HTML样式,由于权重较低css样式失效了.el-menu-item.is-active,菜单背景色background-color 覆盖 激活菜单背景色 backgroun...
- 下一篇
有一部分程序员还不知道Java 中的注解到底是如何工作的?
作者:人晓 前言 自Java5.0版本引入注解之后,它就成为了Java平台中非常重要的一部分。开发过程中,我们也时常在应用代码中会看到诸如@Override,@Deprecated这样的注解。 这篇文章中,我将向大家讲述到底什么是注解,为什么要引入注解,注解是如何工作的,如何编写自定义的注解(通过例子),什么情况下可以使用注解以及最新注解和ADF(应用开发框架)。这会花点儿时间,所以为自己准备一杯咖啡,让我们来进入注解的世界吧。 什么是注解? 用一个词就可以描述注解,那就是元数据,即一种描述数据的数据。所以,可以说注解就是源代码的元数据。比如,下面这段代码: @Override public String toString() { return "This is String Representation of current object."; } 上面的代码中,我重写了toString()方法并使用了@Override注解。但是,即使我不使用@Override注解标记代码,程序也能够正常执行。那么,该注解表示什么?这么写有什么好处吗?事实上,@Override告诉编译器这个方法是一...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- MySQL8.0.19开启GTID主从同步CentOS8
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7设置SWAP分区,小内存服务器的救世主
- CentOS6,7,8上安装Nginx,支持https2.0的开启