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的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
随机推荐
- java tomcate 启动后cmd 出现乱码
今天windows 启动tomcat 后,出现cmd 乱码 尝试改cmd编码为UTF-8后无效,修改tomcat 注册表CodePage ,cmd 依然乱码, 后来把Conf 目录下的logging. ...
- Codeforces1256E_Yet Another Division Into Teams
题意 n个人,每人有一个能力值a[i],要求分成多个队伍,每个队伍至少3个人,使得所有队伍的max(a[i])-min(a[i])之和最小. 分析 不会巧妙的dp,想了一天只想到了暴力的dp. 先排序 ...
- IA-32 Assembly Language Reference Manual
Load Full Pointer (lds,les, lfs, lgs, and lss) lds{wl} mem[32|48], reg[16|32]les{wl} mem[32|48], reg ...
- JSTL 的<c:if>标签没有else的解决办法
我们可以采用<c:choose>来代替<c:if> 具体结构: <c:choose> <c:when test=""> 如果 < ...
- java线程中的同步锁和互斥锁有什么区别?
两者都包括对资源的独占. 区别是 1:互斥是通过竞争对资源的独占使用,彼此没有什么关系,也没有固定的执行顺序. 2:同步是线程通过一定的逻辑顺序占有资源,有一定的合作关系去完成任务.
- 383-基于kintex UltraScale XCKU040的双路QSFP+光纤PCIe 卡
一.板卡概述 本板卡系我司自主研发,基于Xilinx UltraScale Kintex系列FPGA XCKU040-FFVA1156-2-I架构,支持PCIE Gen3 x8模式的高速信号处理板卡 ...
- 校内题目T2695 桶哥的问题——吃桶
同T2一样外校蒟蒻可能没看过: 题目描述: 题目背景 @桶哥 桶哥的桶没有送完. 题目描述 桶哥的桶没有送完,他还有n个桶.他决定把这些桶吃掉.他的每一个桶两个属性:种类aia_iai和美味值bib ...
- Flask【第11篇】:整合Flask中的目录结构
整合Flask中的目录结构 一.SQLAlchemy-Utils 由于sqlalchemy中没有提供choice方法,所以借助SQLAlchemy-Utils组件提供的choice方法 import ...
- InnoDB数据库 ibdata1 被删除后 的恢复方法
前提条件:1 ibdata1 被删除 2 数据库文件还存在 特别是 ibd文件 3 原来数据库表结构及索引还在 恢复步骤: 1. 将原来的数据文件COPY到其它目录下. 2. 创建同名表,表结 ...
- 深入理解vue 修饰符sync
[ vue sync修饰符示例] 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 ...