Vue-路由跳转的几种方式和路由重定向
一、标签路由 router-link
注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
1、不传参 <router-link :to="{name:'Home'}">
<router-link :to="{path:'/home'}"> 2、传参 <router-link :to="{name:'Home', params: {id:1}}">
<router-link :to="{path:'/home', params: {id:1}}">
// params传参数
// 路由配置 path: "/home/:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id <router-link :to="{name:'Home', query: {id:1}}">
// query传参数 (类似get,页面url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
二、编程式路由 this.$router.push()
1、不传参
this.$router.push('/home')
this.$router.push({name:'Home'})
this.$router.push({path:'/home'}) 2、传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// params传参数
// 路由配置 path: "/home/:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id this.$router.push({name:'Home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// query传参数 (类似get,页面url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id
Vue-路由跳转的几种方式和路由重定向的更多相关文章
- vue中通过路由跳转的三种方式
原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...
- Vue进行路由跳转的几种方式
1.<router-link to="需要跳转到页面的路径"> 2.this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回 ...
- vue 页面跳转的两种方式
1,标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...
- vue-router 路由传参的几种方式,刷新页面参数丢失
常见场景:点击列表详情,跳转到详情内页,传递id参数获取详情数据. 我们先来看看路由跳转的几种方式: 1.通过params方式传参 通过$route.push的path携带参数方式 // 路由配置 { ...
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- js实现页面跳转的两种方式
CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- VUE路由携带参数的三种方式
vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...
随机推荐
- yolo系列阅读笔记(v1-v3)
yolov1 模型输出的概率建模 图片首先被分割为S*S的网格(grid cell).如果一个bbox的中心落在一个网格里,则该网格负责检测该物体.(对于pascal数据集,S定为7) 每个网格预测B ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- Markdown上手使用
前言 学习Markdown主要是为了更好的编辑博客(捂脸),顺便学一学Markdown语法,毕竟MarkdownPad 2放着吃灰好久了(雾) MarkdownPad2 下载 链接:https://p ...
- 记录 shell学习过程(4)for 循环
1. for in ` #seq 生成从1到10 如果生成从10到1则写作 seq 10 -1 1 do echo $i done for in 也可以循环出字符串 for i in where is ...
- FireFox浏览器的about:config参数大全及其具体用途介绍
FireFox浏览器的about:config参数大全及其具体用途介绍,注意:这还远不是所有的about:config参数,由于设置参数太多,官方也只提供英文版本的说明,这里提供的FireFox ab ...
- [HAOI2016] 找相同字符 - 后缀数组,单调栈
[HAOI2016] 找相同字符 Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两个子串中有一个位置不同. \(n,m \l ...
- 当要打开PDB时为何会有Warning: PDB altered with errors.
对PDB执行 alter pluggable database pdbprod2 open; 操作后提示:Warning: PDB altered with errors. 来自AskScuti博客园 ...
- 如何着手学习WebRTC开发(转)
文章链接:http://www.sohu.com/a/146536246_458408 WebRTC中文社区-国内镜像:https://webrtc.org.cn/mirror/#windows%E2 ...
- codeforces 1282C. Petya and Exam (贪心)
链接:https://codeforces.com/contest/1282/problem/C 题意: 有一个人参加考试,考试只有两种题,一种是简单题,每道题耗时固定为a:另一种是困难题,每道题耗 ...
- codeforces 1282B2. K for the Price of One (Hard Version) (dp)
链接 https://codeforces.com/contest/1282/problem/B2 题意: 商店买东西,商店有n个物品,每个物品有自己的价格,商店有个优惠活动,当你买恰好k个东西时可以 ...