vue路由传参的几种基本方式
this.$router.push跳转
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。
父组件中:
<li v-for="article in articles" @click="getDescribe(article.id)">
methods:
方案一:
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
方案一,需要对应路由配置如下:
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
this.$route.params.id
方案二:
父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
子组件中: 这样来获取参数
this.$route.params.id
方案三:
父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应路由配置:
{
path: '/describe',
name: 'Describe',
component: Describe
}
对应子组件: 这样来获取参数
this.$route.query.id
下面整理一下params传参和query传参的差别:
1、用法上的
刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候,已经是$route而不是$router了哦!!
2、展示上的
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示。
router-link跳转
params传参(url中显示参数)
文件结构
定义路由:在定义path路由路径时定义参数名和格式,如 path: "/one/login/:num" ,router>index.js文件如下
/* eslint-disable*/ //第一步:引用vue和vue-router ,Vue.use(VueRouter)
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) //第二步:引用定义好的路由组件
import ChildOne from '../components/childOne'
import ChildTwo from '../components/childTwo'
import Log from '../components/log.vue'
import Reg from '../components/reg.vue' //第三步:定义路由(路由对象包含路由名、路径、组件、参数、子路由等),每一个路由映射到一个组件
//第四步:通过new Router来创建router实例
export default new Router({
mode: 'history',
routes: [
{
path: '/one',
name: 'ChildOne',
component: ChildOne,
children:[
{
path:'/one/log/:num',
component:Log,
},
{
path:'/one/reg/:num',
component:Reg,
},
],
},
{
path: '/two',
name: 'ChildTwo',
component: ChildTwo
}
]
})
在父路由组件上使用router-link进行路由导航,传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染,父路由组件childOne.vue 如下:
<template>
<div style="border:1px solid red;color:red;">
<p>这是父路由childOne对应的组件页面</p>
<p>下面可以点击显示嵌套的子路由 </p>
<router-link to="/one/log/123">显示登录页面</router-link>
<router-link to="/one/reg/002">显示注册页面</router-link>
<router-view></router-view>
</div>
</template>
子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数,子路由组件login.vue如下:
<template>
<div style="border:1px solid orange;color:orange;">
<p>登录界面:这是另一个嵌套路由的内容</p>
<h3>{{this.$route.params.num}}</h3>
</div>
</template>
效果:
注意:如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确,否则不断点击切换路由,会因为不断将传递的值显示添加到url中导致路由出错,如下:
传递的值存在url中存在安全风险,为防止用户修改,另一种方式不在url中显示传递的值
params传参(url中不显示参数)
定义路由时添加name属性给映射的路径取一个别名,router>index.js文件修改router如下:
export default new Router({
mode: 'history',
routes: [
{
path: '/one',
name: 'ChildOne',
component: ChildOne,
children:[
{
path:'/one/log/',
name:'Log',
component:Log,
},
{
path:'/one/reg/',
name:'Reg',
component:Reg,
},
],
},
{
path: '/two',
name: 'ChildTwo',
component: ChildTwo
}
]
})
在父路由组件上使用router-link进行路由导航,使用 <router-link :to="{name:'home',params:{id:001}}> 形式传递参数。注意 ': to= ' 前面的冒号,childOne.vue组件修改如下:
<template>
<div style="border:1px solid red;color:red;">
<p>这是父路由childOne对应的组件页面</p>
<p>下面可以点击显示嵌套的子路由 </p>
<router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
<router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
<router-view></router-view>
</div>
</template>
子路由组件页面获取父路由传参方式不变,reg.vue 文件如下:
<template>
<div style="border:1px solid orange;color:orange;">
<p>登录界面:这是另一个嵌套路由的内容</p>
<h3>子路由获取的参数:{{this.$route.params.num}}</h3>
</div>
</template>
注意:上述这种利用params不显示url传参的方式会导致在刷新页面的时候,传递的值会丢失;
使用Query实现路由传参
定义路由 router>index.js文件如下:
export default new Router({
mode: 'history',
routes: [
{
path: '/one',
name: 'ChildOne',
component: ChildOne,
children:[
{
path:'/one/log/',
component:Log,
},
{
path:'/one/reg/',
component:Reg,
},
],
},
{
path: '/two',
name: 'ChildTwo',
component: ChildTwo
}
]
})
修改路由导航 <router-link :to="{path:'/one/log',query:{num:123}}"> ,childOne.vue 文件修改如下:
<template>
<div style="border:1px solid red;color:red;">
<p>这是父路由childOne对应的组件页面</p>
<p>下面可以点击显示嵌套的子路由 </p>
<router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
<router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
<router-view></router-view>
</div>
</template>
子路由组件通过 this.$route.query.num 来显示传递过来的参数,reg.vue 文件如下:
<template>
<div style="border:1px solid purple;color:purple;">
<p>注册界面:这是二级路由页面</p>
<h3>{{this.$route.query.num}}</h3>
</div>
</template>
效果如下:
PS: 在第一步的定义路由中我们都使用了mode:history 作用就是去除路由跳转时路由路径前的 “#”
常用的mode模式有两种:
默认为hash模式,最明显的标志是,URL上有#号 localhost:8080/#/,路由会监听#后面的信息变化进行路由匹配
另一种为history模式,不会有#出现,很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合
默认不使用mode:history 如下
返回目录
vue路由传参的几种基本方式的更多相关文章
- vue路由传参的三种基本方式
现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...
- Vue路由传参的几种方式
原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- vue 路由传参的三种基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- vue路由传参的三种方式
方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...
- vue 路由传参的三种方法
API在这里 https://router.vuejs.org/guide/essentials/navigation.html 第一种传参 通过路由属性中的name来确定匹配的路由,通过param ...
- vue --- 路由传参的几种方式
方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) ...
- vue路由传参及组件传参和组件方法调用
VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...
随机推荐
- Linux(Ubuntu)安装ssh服务
在终端(Ctrl + Alt + T )输入 $ps -e | grep ssh 看到 “ ssh-agent ” 和 “sshd” ,表示没有安装服务,或没有开机启动 1.安装SSH 输入:sudo ...
- Spring Boot 跨域访问
如何在 Spring Boot 中配置跨域访问呢? Spring Boot 提供了对 CORS 的支持,您可以实现WebMvcConfigurer 接口,重写addCorsMappings 方法来添加 ...
- Educational Codeforces Round 73 (Rated for Div. 2) A. 2048 Game
链接: https://codeforces.com/contest/1221/problem/A 题意: You are playing a variation of game 2048. Init ...
- 【Wince-禁止重复启动程序】Wince 不重复启动程序
创建类Mutex.cs: using System; using System.Linq; using System.Collections.Generic; using System.Text; u ...
- my_note
1.C# $ 内插字符串 Console.WriteLine($"The value of pi is {Math.PI}"); 替代string.format 2. switch ...
- Python 3 格式化字符串的几种方法!
Python 3 格式化字符串的几种方法! %s和%d,%s是用来给字符串占位置,%d是给数字占位置,简单解释下: a = 'this is %s %s' % ('an','apple') 程序输出的 ...
- 编码问题2 utf-8和Unicode的区别
utf-8和Unicode到底有什么区别?是存储方式不同?编码方式不同?它们看起来似乎很相似,但是实际上他们并不是同一个层次的概念 要想先讲清楚他们的区别,首先应该讲讲Unicode的来由. 众所周知 ...
- js+下载文件夹
一.此方法火狐有些版本是不支持的 window.location.href = 'https://*****.oss-cn-**.aliyuncs.com/*********'; 二.为了解决火狐有些 ...
- python实现 单链表的翻转
#!/usr/bin/env python #coding = utf-8 class Node: def __init__(self,data=None,next = None): self.dat ...
- 洛谷——P2058 海港
题目传送 由于于题目保证输入的ti是递增的,所以发现当我们统计完一艘船的答案后,这个答案多少会对下一艘船的答案有贡献.同时还发现如果对每个艘船都记录他的乘客在整个数据出现的所有国籍中相应出现的次数,在 ...