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: ...
随机推荐
- set的使用
集合是Python的一种数据类型,集合是一个可变容器.常用于列表的去重. 什么是集合 集合是一个可变容器 集合中的数据对象都是唯一的(不可重复) 集合是无序的存储结构 集合是可迭代对象 集合内的元素是 ...
- SpringCloud Netflix Zuul
网关的概念 服务A.B都是暴露出来,供外部直接调用的, 有时候需要对请求进行过滤.校验,比如检验用户是否已登陆,可以写在暴露出来的每个服务中,但要在多个服务中写相同的代码,太繁琐,可以提出来,放在网关 ...
- axios的基本用法与并发请求
一.axios的基本用法 <router-link to="" class="a1" @click.native="logins"&g ...
- CentOS安装RabbitMQ-yum
CentOS安装RabbitMQ----yum安装 一.安装erlang 由于CentOS没有erlang源,需用 第三方源(http://rpmfusion.org/Configuration) 1 ...
- 【Python】random库
种子相同,随机数相同
- C语言-数组指针与指针数组
1.思考 下面这些声明合法吗? int array[5]; int matrix[3][3]; int * pa = array; int * pm = matrix; 问题: array代表数组首元 ...
- linux 命令 mkdir
mkdir -p 如果要创建目录A并创建目录A的子目录B,没有用-p的情况下mkdir 逐个的创建目录(mkdir A,mkdir A/B); 如果用-p 可以直接创建2个目录 mkdir -p A/ ...
- python如何离线装包 离线如何部署python环境
1,安装python windows: 我用的是python3.6.6.exe安装包,需要提前下载好 ubuntu: 自带的python,如果是ubuntu18.04的话,自带的应该是3.6.8 2, ...
- 同一域名的ASP.NET网站实现Session共享
Session共享主要保证两点: 前台Asp_SessionId的Cookie作用域为顶级域名,且值相同 后端Session公用同一源 通过自定义HttpModule可以实现这两个需求 /// < ...
- win32 用户自定义消息范围
WINDOWS自定义消息WM_USER和WM_APP WM_USER常量是Windows帮助应用程序定义私有窗口类里的私有消息,通常使用WM_USER+一个整数值,但总值不能超过0x7FFF. #de ...