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 ...
随机推荐
- FFmpeg常用命令学习笔记(二)录制命令
录制命令 1.FFmpeg录屏命令 ffmpeg -f avfoundation -i 1 -r 30 out.yuv -f:指定使用avfoundation采集数据 -i:指定从哪采集数据,它是一个 ...
- 02—mybatis的基本用法01
深入mybatis的配置文件(mybatis-config.xml) MyBatis的配置文档结构 顶层configuration 配置 properties 属性 settings 设置 typ ...
- BZOJ5093 图的价值——推式子+第二类斯特林数
原题链接 题解 题目等价于求这个式子 \[ans=n2^{\frac{(n-1)(n-2)}{2}}\sum\limits_{i=0}^{n-1}\binom{n-1}{i}i^k\] 有这么一个式子 ...
- elementUI el-date-picker 时间范围设置 固定时间段可选 配置
https://blog.csdn.net/sinat_37255207/article/details/91793889 <el-date-picker v-model="start ...
- String字符串反转
new StringBuffer("abcde").reverse().toString(); 通过char数组进行转换 package com.test.reverse; pub ...
- BZOJ 3289: Mato的文件管理 (区间查询逆序对)
这道题就是不要求强制在线的 BZOJ 3744 Gty的妹子序列 所以说离线做法有莫队,在线做法见上面连接. 这里贴出常数巨大O(nnlogn)O(n\sqrt nlogn)O(nnlogn)分块+ ...
- JavaScript三元运算符
㈠条件运算符也叫做三元运算符 ⑴语法:条件表达式?语句1:语句2: ⑵执行的流程: ①条件运算符在执行时,首先对条件表达式进行求值 ▶如果该值为true,则执行语句1,并返回执行结果 ▶如果该值为fa ...
- Ubuntu操作及Linux基础知识
part 1: Ubuntu操作基础 1.调整字体的大小 调大:crtl+shift+“+” 调小:crtl+“-” 2.不要把虚拟机全屏的时候截屏,要不然会认为是Linux系统截屏而非Window ...
- closest(expr|object|element)
closest(expr|object|element) 概述 jQuery 1.3新增.从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素..大理石平台生产厂 closest会首先检查当前元素 ...
- vim.rc配置(deepin)
set nocompatible " be iMproved, requiredfiletype off " required " set the runtime pat ...