原文地址


this.$router.push跳转

现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据。
父组件中:

  1. <li v-for="article in articles" @click="getDescribe(article.id)">

methods:

方案一:

  1. getDescribe(id) {
  2. // 直接调用$router.push 实现携带参数的跳转
  3. this.$router.push({
  4. path: `/describe/${id}`,
  5. })

方案一,需要对应路由配置如下:

  1. {
  2. path: '/describe/:id',
  3. name: 'Describe',
  4. component: Describe
  5. }

很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

  1. this.$route.params.id

方案二:

父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

  1. this.$router.push({
  2. name: 'Describe',
  3. params: {
  4. id: id
  5. }
  6. })

对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。

  1. {
  2. path: '/describe',
  3. name: 'Describe',
  4. component: Describe
  5. }

子组件中: 这样来获取参数

  1. this.$route.params.id

方案三:

父组件:使用path来匹配路由,然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=?

  1. this.$router.push({
  2. path: '/describe',
  3. query: {
  4. id: id
  5. }
  6. })

对应路由配置:

  1. {
  2. path: '/describe',
  3. name: 'Describe',
  4. component: Describe
  5. }

对应子组件: 这样来获取参数

  1. 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文件如下

  1. /* eslint-disable*/
  2.  
  3. //第一步:引用vue和vue-router ,Vue.use(VueRouter)
  4. import Vue from 'vue'
  5. import Router from 'vue-router'
  6. Vue.use(Router)
  7.  
  8. //第二步:引用定义好的路由组件
  9. import ChildOne from '../components/childOne'
  10. import ChildTwo from '../components/childTwo'
  11. import Log from '../components/log.vue'
  12. import Reg from '../components/reg.vue'
  13.  
  14. //第三步:定义路由(路由对象包含路由名、路径、组件、参数、子路由等),每一个路由映射到一个组件
  15. //第四步:通过new Router来创建router实例
  16. export default new Router({
  17.   mode: 'history',
  18.   routes: [
  19.     {
  20.       path: '/one',
  21.       name: 'ChildOne',
  22.       component: ChildOne,
  23.       children:[
  24.         {
  25.           path:'/one/log/:num',
  26.           component:Log,
  27.         },
  28.         {
  29.           path:'/one/reg/:num',
  30.           component:Reg,
  31.         },
  32.       ],
  33.     },
  34.     {
  35.       path: '/two',
  36.       name: 'ChildTwo',
  37.       component: ChildTwo
  38.     }
  39.   ]
  40. })

在父路由组件上使用router-link进行路由导航,传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染,父路由组件childOne.vue 如下:

  1. <template>
  2.   <div style="border:1px solid red;color:red;">
  3.     <p>这是父路由childOne对应的组件页面</p>
  4.     <p>下面可以点击显示嵌套的子路由 </p>
  5.     <router-link to="/one/log/123">显示登录页面</router-link>
  6.     <router-link to="/one/reg/002">显示注册页面</router-link>
  7.     <router-view></router-view>
  8.   </div>
  9. </template>

子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数,子路由组件login.vue如下:

  1. <template>
  2. <div style="border:1px solid orange;color:orange;">
  3. <p>登录界面:这是另一个嵌套路由的内容</p>
  4. <h3>{{this.$route.params.num}}</h3>
  5. </div>
  6. </template>

效果:

注意:如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确,否则不断点击切换路由,会因为不断将传递的值显示添加到url中导致路由出错,如下:

传递的值存在url中存在安全风险,为防止用户修改,另一种方式不在url中显示传递的值

params传参(url中不显示参数)

定义路由时添加name属性给映射的路径取一个别名,router>index.js文件修改router如下:

  1. export default new Router({
  2. mode: 'history',
  3. routes: [
  4. {
  5. path: '/one',
  6. name: 'ChildOne',
  7. component: ChildOne,
  8. children:[
  9. {
  10. path:'/one/log/',
  11. name:'Log',
  12. component:Log,
  13. },
  14. {
  15. path:'/one/reg/',
  16. name:'Reg',
  17. component:Reg,
  18. },
  19. ],
  20. },
  21. {
  22. path: '/two',
  23. name: 'ChildTwo',
  24. component: ChildTwo
  25. }
  26. ]
  27. })

在父路由组件上使用router-link进行路由导航,使用   <router-link :to="{name:'home',params:{id:001}}>    形式传递参数。注意   ': to= ' 前面的冒号,childOne.vue组件修改如下:

  1. <template>
  2. <div style="border:1px solid red;color:red;">
  3. <p>这是父路由childOne对应的组件页面</p>
  4. <p>下面可以点击显示嵌套的子路由 </p>
  5. <router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
  6. <router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
  7. <router-view></router-view>
  8. </div>
  9. </template>

子路由组件页面获取父路由传参方式不变,reg.vue 文件如下:

  1. <template>
  2. <div style="border:1px solid orange;color:orange;">
  3. <p>登录界面:这是另一个嵌套路由的内容</p>
  4. <h3>子路由获取的参数:{{this.$route.params.num}}</h3>
  5. </div>
  6. </template>

注意:上述这种利用params不显示url传参的方式会导致在刷新页面的时候,传递的值会丢失;

使用Query实现路由传参

定义路由 router>index.js文件如下:

  1. export default new Router({
  2.   mode: 'history',
  3.   routes: [
  4.     {
  5.       path: '/one',
  6.       name: 'ChildOne',
  7.       component: ChildOne,
  8.       children:[
  9.         {
  10.           path:'/one/log/',
  11.           component:Log,
  12.         },
  13.         {
  14.           path:'/one/reg/',
  15.           component:Reg,
  16.         },
  17.       ],
  18.     },
  19.     {
  20.       path: '/two',
  21.       name: 'ChildTwo',
  22.       component: ChildTwo
  23.     }
  24.   ]
  25. })

  

修改路由导航 <router-link :to="{path:'/one/log',query:{num:123}}"> ,childOne.vue 文件修改如下:

  1. <template>
  2.   <div style="border:1px solid red;color:red;">
  3.     <p>这是父路由childOne对应的组件页面</p>
  4.     <p>下面可以点击显示嵌套的子路由 </p>
  5.     <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
  6.     <router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
  7.     <router-view></router-view>
  8.   </div>
  9. </template>

  

子路由组件通过 this.$route.query.num 来显示传递过来的参数,reg.vue 文件如下:

  1. <template>
  2.   <div style="border:1px solid purple;color:purple;">
  3.     <p>注册界面:这是二级路由页面</p>
  4.     <h3>{{this.$route.query.num}}</h3>
  5.   </div>
  6. </template>

  

效果如下:

PS: 在第一步的定义路由中我们都使用了mode:history 作用就是去除路由跳转时路由路径前的 “#”

常用的mode模式有两种:

默认为hash模式,最明显的标志是,URL上有#号 localhost:8080/#/,路由会监听#后面的信息变化进行路由匹配

另一种为history模式,不会有#出现,很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合

默认不使用mode:history 如下


返回目录

vue路由传参的几种基本方式的更多相关文章

  1. vue路由传参的三种基本方式

    现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click= ...

  2. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  3. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  4. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

  5. vue 路由传参的三种基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  6. vue路由传参的三种方式

    方式一 通过query方式传参 这种情况下 query传递的参数会显示在url后面 this.$router.push({ path: '/detail', query: { id: id } }) ...

  7. vue 路由传参的三种方法

    API在这里  https://router.vuejs.org/guide/essentials/navigation.html 第一种传参 通过路由属性中的name来确定匹配的路由,通过param ...

  8. vue --- 路由传参的几种方式

    方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${id}`, }) ...

  9. vue路由传参及组件传参和组件方法调用

    VUE路由和组件传参 第一种vue自带的路由传参的三种基本方式 1.通过name :id传参 子组件通过$route.name接收参数 { path: '/particulars/:id', name ...

随机推荐

  1. FFmpeg常用命令学习笔记(二)录制命令

    录制命令 1.FFmpeg录屏命令 ffmpeg -f avfoundation -i 1 -r 30 out.yuv -f:指定使用avfoundation采集数据 -i:指定从哪采集数据,它是一个 ...

  2. 02—mybatis的基本用法01

    深入mybatis的配置文件(mybatis-config.xml)   MyBatis的配置文档结构 顶层configuration 配置 properties 属性 settings 设置 typ ...

  3. BZOJ5093 图的价值——推式子+第二类斯特林数

    原题链接 题解 题目等价于求这个式子 \[ans=n2^{\frac{(n-1)(n-2)}{2}}\sum\limits_{i=0}^{n-1}\binom{n-1}{i}i^k\] 有这么一个式子 ...

  4. elementUI el-date-picker 时间范围设置 固定时间段可选 配置

    https://blog.csdn.net/sinat_37255207/article/details/91793889 <el-date-picker v-model="start ...

  5. String字符串反转

    new StringBuffer("abcde").reverse().toString(); 通过char数组进行转换 package com.test.reverse; pub ...

  6. BZOJ 3289: Mato的文件管理 (区间查询逆序对)

    这道题就是不要求强制在线的 BZOJ 3744 Gty的妹子序列 所以说离线做法有莫队,在线做法见上面连接. 这里贴出常数巨大O(nnlogn)O(n\sqrt nlogn)O(nn​logn)分块+ ...

  7. JavaScript三元运算符

    ㈠条件运算符也叫做三元运算符 ⑴语法:条件表达式?语句1:语句2: ⑵执行的流程: ①条件运算符在执行时,首先对条件表达式进行求值 ▶如果该值为true,则执行语句1,并返回执行结果 ▶如果该值为fa ...

  8. Ubuntu操作及Linux基础知识

    part 1: Ubuntu操作基础 1.调整字体的大小 调大:crtl+shift+“+”  调小:crtl+“-” 2.不要把虚拟机全屏的时候截屏,要不然会认为是Linux系统截屏而非Window ...

  9. closest(expr|object|element)

    closest(expr|object|element) 概述 jQuery 1.3新增.从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素..大理石平台生产厂 closest会首先检查当前元素 ...

  10. vim.rc配置(deepin)

    set nocompatible " be iMproved, requiredfiletype off " required " set the runtime pat ...