vue路由跳转的几种方式
1、router-link (声明式路由)
1. 不带参数<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。2.带参数<router-link :to="{name:'home', params: {id:1}}"> // params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留// html 取参 $route.params.id
// script 取参 this.$route.params.id<router-link :to="{name:'home', query: {id:1}}">
2、router.push(编程式路由)
// 字符串
router.push('home')// 对象
router.push({ path: 'home' })// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
3、this.$router.push() (函数里面调用)
1. 不带参数this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})2. query传参 this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})// html 取参 $route.query.id
// script 取参 this.$route.query.id3. params传参this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留// html 取参 $route.params.id
// script 取参 this.$route.params.id4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
4. this.$router.replace() (用法同上,push)
5. this.$router.go(n) ()
this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数ps : 区别this.$router.push
跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数
注意:获取路由上面的参数,用的是$route,后面没有r
params是路由的一部分,必须要有。query是拼接在url后面的参数,没有也没关系。
params一旦设置在路由,params就是路由的一部分,如果这个路由有params传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
params、query不设置也可以传参,但是params不设置的时候,刷新页面或者返回参数会丢失,
两者都可以传递参数,区别是什么?
query 传参配置的是path,而params传参配置的是name,在params中配置path无效
query在路由配置不需要设置参数,而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效,但是query会保存传递过来的值,刷新不变
参考:https://blog.csdn.net/jiandan1127/article/details/86170336
vue.js 官网
vue路由跳转的几种方式相关推荐
- vue设置html自动跳转路由,vue路由跳转的三种方式是什么?
本教程操作环境:windows7系统.vue2.9版,适用于所有品牌电脑. vue中通过路由跳转的三种方式 router-view 实现路由内容的地方,引入组件时写到需要引入的地方, 需要注意的是,使 ...
- Vue路由跳转的几种方式及解释说明
一.router-link(声明式路由,在页面中调用) 在Vue中,router-link称为声明式路由,常放在页面中,:to绑定为跳转的目标地址,通过点击实现跳转,路由的跳转主要有两种形式,一种是通 ...
- vue路由跳转的四种方法
vue路由跳转有四种方式 router-link this.$router.push() (函数里面调用) this.$router.replace() (用法同push) this.$router. ...
- vue 函数 路由跳转_vue中通过路由跳转的三种方式
router-view 实现路由内容的地方,引入组件时写到需要引入的地方 需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
- vue中实现路由跳转的三种方式(超详细整理)
vue中实现路由跳转的三种方式 一.使用vue-router vue-router 本质是一个第三方的包 用的时候需要下载 步骤 (7步法 ): 下载vue-router模块到当前工程 yarn ad ...
- vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题 一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参 二.三种传递方式的区别 一 ...
- 详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
- 【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...
- 阻止路由跳转得方式_vue中路由跳转的三种方式 简洁易懂
router-view 实现路由内容的地方,引入组件时写到需要引入的地方 需要注意的是,使用vue-router控制路由则必须router-view作为容器. 通过路由跳转的三种方式 1.router ...
最新文章
- C语言与数据库操作入门(Win版)
- 【django轻量级框架】View与Model交互(模块的交互关系)
- 操作系统课设--使用信号量解决生产者/消费者同步问题
- java利用poi读取excel_java利用POI 读取EXCEL
- python3安装mysqlclient_Python3 安装mysqlclient错误处理(MAC版)
- JavaFX的响应式设计
- 如何使用Tornado实现WebSocket服务器?
- SPT20 协议_过户协议书模板五篇
- 深入解析ES6中let和闭包
- 百万畅销书带你学 Python:第一个程序
- 在线数值列表求和工具
- 解决 warning C4003: “min”宏的实参不足
- 反向传播网络(BP 网络)
- 对overflow与zoom”清除浮动”的一些认识
- Windows2016 L2TP配置(证书模式)
- 【stm32f407】硬件介绍
- CS5213芯片|HDMI to VGA转换头芯片
- vue轮播组件--不插电手动粘贴版
- 自定义view系列---刮刮乐的实现
- BUUCTF-WEB 【0CTF 2016】piapiapia 1