vue根据参数不同的路由跳转以及name的作用
最近在做VUE路由跳转根据参数的值不同但是跳转的是同一个路由的功能。点击左边的目录,根据目录ID跳转不同的列表。如下图。
路由跳转的代码:
this.$router.push({path: '/RFIndex/resourceList', name: '资源列表', params: {id: 2}})
也可以这么写
this.$router.push({path: '/RFIndex/resourceList', params: {id: 2}})
这两种其实都可以跳转到想要的路由。
但是我如果想要根据id的值不同而去跳转相同的路由,以下是id不同。
this.$router.push({path: '/RFIndex/resourceList', n params: {id: 2}})
和
this.$router.push({path: '/RFIndex/resourceList', params: {id: 3}})
但是当我点击跳转的时候右边的列表是没有刷新的。因为路由没有变化。虽然数据发生了变化,但是调用的依然是同一个组件,组件复用了所以不刷新。所以这时候就要使用不同的路由来跳转。下面在路由后面添加参数的值就可以让路由变化从而重新刷新页面。
this.$router.push({path: '/RFIndex/resourceList/:id', params: {id: 3}})
和
this.$router.push({path: '/RFIndex/resourceList/:id', params: {id: 2}})
此时还需要修改index.js里面的配置文件,路由后面加上:id
path: '/RFIndex/resourceList/:id',
这样子点击左边目录的时候,此时的路由并不是我想要的,因为根据id的不同路由始终是:id。
此时加上name属性,
this.$router.push({path: '/RFIndex/resourceList/:id', name: '资源列表',params: {id: 3}})
再修改index.js
name: '资源列表',path: '/RFIndex/resourceList',
再点击目录访问页面,发现URL正常了,还不是我想要的结果。因为就算路由发生了变化,数据还是没有变化。
因为vue每次调用组件的时候会观察是否已经created,而我的组件是已经created的,所以当我id发生变化的时候,组件没有重新创建。因此要在组件中再加上一个方法。把自己要处理的数据写在next()之后。
beforeRouteUpdate (to, from, next) {
next()
this.id = this.$route.params.id if (this.id === 3) {
this.tableData = tableApi.tableDataLess
} else {
this.tableData = tableApi.tableData
}
}
这样就可以根据id的不同跳转路由复用同一个组件。
------------------------------------------------------------------------------
vue根据参数不同的路由跳转以及name的作用的更多相关文章
- Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块
路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...
- 10. vue axios 请求未完成时路由跳转报错问题
axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...
- vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法
传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...
- vue 所有的路由跳转加一个统一参数
需求是什么 所有的路由跳转加一个统一的参数 实现方式 先深入理解一下router的全局前置守卫 router.beforeEach((to, from, next) => { const que ...
- vue设置路由跳转参数,以及接收参数
最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link :to ...
- 详解vue 路由跳转四种方式 (带参数)
详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1. router-link ? 1 2 3 4 5 6 7 8 9 10 ...
- Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据
准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
随机推荐
- Linux命令基础#1
系统基础 三大部件:CPU 内存 IO 1.CPU :运算器 控制器 存储器 2.内存:CPU的数据只能从内存读取,且内存数据有易失性(页面) 3.IO:控制总线 数据总线(一个IO) OS原理: O ...
- JavaSE--类与对象
一.类 类是具有相同特性(数据元素)和行为(功能)的对象的抽象就是类.因此,对象的抽象是类,类的具体化就是对象,也可以说类的实例是对象,类实际上就是一种数据类型.类具有属性,它是对象的状态的抽象,用数 ...
- KL散度的理解(GAN网络的优化)
原文地址Count Bayesie 这篇文章是博客Count Bayesie上的文章Kullback-Leibler Divergence Explained 的学习笔记,原文对 KL散度 的概念诠释 ...
- 【三】Django模版的使用
作为Web框架,Django提供了模板,可以很便利的动态生成HTML 模版系统致力于表达外观,而不是程序逻辑 模板的设计实现了业务逻辑(view)与显示内容(template)的分离,一个视图可以使用 ...
- MySQL基础入门之常用命令介绍
mysql命令介绍 mysql 是数据库管理命令 通过mysql --help来查看相关参数及使用说明 mysql --help #mysql数据库管理命令 Usage: ...
- 响应式前端框架Bootstrap系列(11)分页
分页功能已经封装成一个独立的js文件,也是用bs完成的,名称为bootstrap-paginator.js. 使用前先导入文件 : <script src="../libs/boots ...
- node端口被占用
Error: listen EADDRINUSE :::8000 at Object._errnoException (util.js:992:11) at _exceptionWithHostPor ...
- day04-jQuery
jQ宗旨:write less do more jq是js的框架,底层封装了js代码. jq引入: <script type="text/javascript" src=&q ...
- sed 删除用法
sed ‘1,4d’ dataf1 #把第一行到第四行删除,并且显示剩下的内容 sed ‘/La/d’ dataf2 #把含有 La 的行删除 sed ‘/La/!d`’#把不含 La 的行删除,!是 ...
- ansible 的file 模块
创建.修改.删除文件或者目录: file模块 file模块常用的几个参数:state.path.src.dest.mode.owner.group.name.recurse state后面跟的参数: ...