最近在做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的不同跳转路由复用同一个组件。

------------------------------------------------------------------------------

原文  有茶就喝茶 https://www.cnblogs.com/ccplus/p/8535987.html

vue根据参数不同的路由跳转以及name的作用的更多相关文章

  1. Vue框架(四)——路由跳转、路由传参、cookies、axios、跨域问题、element-ui模块

    路由跳转 三种方式: $router.push / $router.go / router-link to this.$router.push('/course'); this.$router.pus ...

  2. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  3. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  4. vue 所有的路由跳转加一个统一参数

    需求是什么 所有的路由跳转加一个统一的参数 实现方式 先深入理解一下router的全局前置守卫 router.beforeEach((to, from, next) => { const que ...

  5. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  6. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  7. Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据

    准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状 参考文章: JS实现 JSON扁平数据转换树状数据 后台我拿的数据是这样的格式: [ {id:1 , parentId: 0 ...

  8. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

  9. 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...

随机推荐

  1. Python 入门之 内置模块 -- sys模块

    Python 入门之 内置模块 -- sys模块 1.sys模块 sys模块是与python解释器交互的一个接口 print(sys.path) #模块查找的顺序 print(sys.argv) # ...

  2. lamp项目上线流程简述 (ubuntu16.04 )

    1  新建一个sudo用户,而不是直接用root操作 ①  新建用户可参考 https://www.cnblogs.com/bushuwei/p/10880182.html ②  赋予sudo权限: ...

  3. linux上安装Eclipse

    之所以要在linux上安装Eclipse,是因为一开始我是通过Eclipse+MingW+Samba+GDBserver方式在Windows上远程操作,准备编译调试nginx源代码的,可是在编译调试过 ...

  4. 一、Vue CLI

    一.Vue CLI https://cli.vuejs.org/zh/guide/installation.html 介绍: 二.安装 # 安装 Vue Cli npm install -g @vue ...

  5. PAT Basic 1067 试密码 (20 分)

    当你试图登录某个系统却忘了密码时,系统一般只会允许你尝试有限多次,当超出允许次数时,账号就会被锁死.本题就请你实现这个小功能. 输入格式: 输入在第一行给出一个密码(长度不超过 20 的.不包含空格. ...

  6. (转) httpclient对cookie的处理

    session的保持是通过cookie来维持的,所以如果用户有勾选X天内免登录,这个session 就X天内一直有效,就是通过这个cookie来维护.如果没选X天内免登录,基本上就本次才能保持sess ...

  7. 磁盘空间命令df/du/free

    1.df 显示文件系统大小 -h 以易读方式显示 -k KB -m MB -a 显示所有 2. du 显示文件大小 -h 只显示目录 -a 所有 -s 只显示总量 3.free 显示内存 -k -m ...

  8. Spring mvc 搭建Mybatis

    本文建立在spring mvc已经搭建起来的基础上. 首先看要引入的jar包,其中高亮的是为了mybatis新引入的. <properties>       <spring.webm ...

  9. 【洛谷P1919】A*B Problem升级版

    题目大意:rt 题解:将长度为 N 的大整数看作是一个 N-1 次的多项式,利用 FFT 计算多项式的卷积即可. 代码如下 #include <bits/stdc++.h> using n ...

  10. 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板

    vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cli ...