Vue中this.$router.push路由跳转,刷新参数消失
Vue中this.$router.push路由跳转,刷新参数消失
this.$router.push({name:"",params:{id:""}})
name和params搭配刷新参数会消失
this.$router.push({path:"",query:{id:""}})
path和query搭配,刷新页面参数不会消失,query中参数成了url中的一部分。
在项目中,通过一个列表进入详情页,携带参数id渲染不同的详情页,动态传参使用编程式跳转。
vue传参方法一
在router路由配置中。
{
path: ‘/article/:id’,
name: ‘Article’,
component: Article,
}
在列表页中点击事件
handleClick(id){
this. r o u t e r . p u s h ( ‘ / a r t i c l e / router.push(`/article/ router.push(‘/article/{id}`) ;
}
在详情页中使用params获取
mounted() {
console.log(this.$route.params.id);
}
特点:方法一中需要在path中添加/:id来对应 $router.push 中path携带的参数。会把详情id暴漏在网址中。
vue传参方法二
在router路由配置中
{
path: ‘/article’,
name: ‘Article’,
component: Article,
}
在列表页中点击事件
handleClick(id){
this.$router.push({
name: ‘Article’,
params: {
id: id
}
})
}
在详情页中使用params获取
mounted() {
console.log(this.$route.params.id);
}
特点;这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。所以不会暴漏在网址中,同时也不会变化网址,router.afterEach也没有办法调用。
vue传参方法三
在router路由配置中
{
path: ‘/article’,
name: ‘Article’,
component: Article,
}
在列表页中点击事件
handleClick(id){
this.$router.push({
path: ‘/article’,
query: {
id: id
}
})
}
在详情页中使用query
在详情页中使用query获取
mounted() {
console.log(this.$route.query.id);
}
特点:这种情况下 query传递的参数会在url后面拼接上 ?id=?,同样会暴漏详情id
开始提到了编程式跳转,这里还要在说一种编程式不携参的跳转方式$router.go();
这个就随意提一下,就是类似于history.go()的方法,括号里面填个1就是前进一级页面,-1就后退一级页面。
Vue中this.$router.push路由跳转,刷新参数消失相关推荐
- vue中this.$router.push()路由传值和获取的两种常见方法
我们在做项目时 ,经常会遇到路由跳转页面传值的问题,有的路由跳转到导航页面时 导航的样式也就改变了. 命名的路由(通过params) this.$router.push({name: "路径 ...
- 前端笔记-vue中使用router进行页面跳转及除掉url中的#
目录 演示 代码 演示 运行截图如下: 点击后,url跳转如下: 代码 页面跳转的关键 程序结构如下: aaa.vue <template><div>我是aaa<butt ...
- Vue中this.$router.replace和this.$router.push的区别
this.$router.push 跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面. 声明式:< router-link :to = "-" ...
- vue-router同路由$router.push不跳转一个简单解决方案
vue-router同路由$router.push不跳转一个简单解决方案 vue-router跳转一般是这么写: toCurrentPage: function(thisId){ this.$rout ...
- vue2.0 点击跳转传参--vue路由跳转传参数
vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 1. router-link [html] view plaincopy <r ...
- vue中如何获取当前路由地址
vue获取当前路由地址 1.router和$route的区别 $router: 路由操作对象,只写.需要对路由进行操作时使用.如路由跳转 $route: 路由信息对象,只读.获取路由相关信息时使用.如 ...
- vue中的for循环路由二级路由
vue中的for循环路由二级路由 1.第一步先写需要使用的仓库,里面是需要循环的数据name的设置,class的名称,以及要跳转的路径名称 2.第二部分的样式,在正文中进行循环输出.这里需要使用rou ...
- 前端笔记-vue cli中使用router-link进行路由跳转
目录 以前的方法 新方法 以前的方法 以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
- Vue中的router路由
目录 一,vue-router路由 二,vue-router路由常用配置 三,vue-router路由嵌套 四,vue-router路由参数传递与获取 五,使用props替代路由对象获取参数 六,路由 ...
最新文章
- robots.txt文件的解析及过滤
- 面试问题之操作系统:死锁的四个必要条件和解决办法
- 编程之美2.13 子数组的最大乘积
- SVN删除服务器端项目文件
- Delphi XE 使用 MySQL 数据库一个奇怪的问题
- keras随笔-读取IMDB电影数据集
- python中的变量的作用_Python中的变量作用域
- 中文巨量模型“源1.0”的学习优化方法
- 1.1.0-简介-P10-分布式事务的解决方案
- 【水】HDU 2099——整除的尾数
- php 双问号 语法,JS 新语法「可选链」「双问号」已进入 Stage 3
- 海龟绘图两小时上手C语言 - 2 绘制正方形
- IT 技能发展:10 大基本 IT 技能(精通一半你就是人才)
- SonarLint: Replace the type specification in this constructor call with the diamond operator (“<>“).
- 单元测试、集成测试、系统测试、验收测试
- 动态图象专家组 MPEG-4
- WINVER 和 _WIN32_WINNT
- 程序员soul 012期|妹子|重庆
- 3d max 安装及激活教程
- mysql数据库性能优化—my.cnf详解