在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中。

1、显示在url中
index.html

<div id="app">
  <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

main.js params传值是通过:[参数值] 如path:"/home/game/:num"

import Vue from 'vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  //引入两个组件
  import home from "./home.vue"
  import game from "./game.vue"
  //定义路由
  const routes = [
    { path: "/", redirect: "/home" },//重定向
    {
      path: "/home", component: home,
      children: [
        { path: "/home/game/:num", component: game }
      ]
    }
  ]
  //创建路由实例
  const router = new VueRouter({routes})   new Vue({
    el: '#app',
    data: {
      id:123,
    },
    methods: {
    },
    router
  })

home.vue 在home中具体的值就跟在路径后面,如 “/home/game/123”,也就是说传递给子路由的值就是 123

<template>
    <div>
      <h3>首页</h3>
      <router-link to="/home/game/123">
        <button>显示</button>
      </router-link>
      <router-view></router-view>
    </div>
  </template>

game.vue 在子路由中,通过 this.$route.params.参数名来接受传递过来的值

<template>
  <h3>王者荣耀{{ this.$route.params.num }}</h3>
</template>

2、不显示在url中,如果在PC端将传递的值显示在url中,这样无形中就存在安全隐患,如果客户不小心修改了url那样就会出错,移动端就无所谓了,如何才能不显示在url中,同样很简单,但是需要给映射的路径起一个别名,通过name来取别名

同样只需将上面的main.js中的定义路由改为如下样子,在子路由中通过name来给路径其一个game1的别名。

//定义路由
  const routes = [
    { path: "/", redirect: "/home" },//重定向
    {
      path: "/home", component: home,
      children: [
        { name: "game1", path: "/home/game/", component: game }
      ]
    }
  ]

home.vue 中router-link修改为:to="{ name:'game1', params: {num: 123} }" params中是要传递的参数,这样传递的参数就不会显示在url中 

<template>
    <div>
      <h3>首页</h3>
      <router-link :to="{ name:'game1', params: {num: 123} }">
        <button>显示</button>
      </router-link>
      <router-view></router-view>
    </div>
  </template>

原文地址:http://www.jb51.net/article/114436.htm

vue嵌套路由--params传递参数的更多相关文章

  1. vue嵌套路由-query传递参数(三)

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  2. Vue通过路由 query传递参数

    父组件通过query来传递num参数为1,相当与在 url 地址后面拼接参数 <template> <div> <h3>首页</h3> <rout ...

  3. vue嵌套路由 && 404重定向

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...

  4. vue嵌套路由与404重定向实现方法分析

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rout ...

  5. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  6. Vue 嵌套路由使用总结

    Vue 嵌套路由使用总结   by:授客 QQ:1033553122   开发环境   Win 10   node-v10.15.3-x64.msi 下载地址: https://nodejs.org/ ...

  7. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  8. vue嵌套路由总结

    嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一 ...

  9. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

随机推荐

  1. 解决Maven管理项目update Maven时,jre自动变为1.5

    本文为博主原创,未经允许不得转载: 在搭建一个maven web项目时,项目已经按步骤搭建完好,之后项目上就报了一个错误. 在控制台看到错误提示如下:Dynamic Web Module 3.0 re ...

  2. usart2 重映射

    今天拾起闲置很久的灰机,测试发现nrf2401坏掉,重新淘宝.还发现机上搭载的usart1坏掉,换成usart2,发现端口被电机占用,重映射到PD5,PD6 关键是后面两句不要忘记了 RCC_APB1 ...

  3. 七、面向对象编程(OOP)

    面向对象编程:一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 1.类(class) class:自定义的对象数据类型.基于类创建多个对象,每个对象具备类的通用行 ...

  4. python学习 day011打卡 迭代器

    本节的主要内容: 1.函数名的使用以及第一类对象 2.闭包 3.迭代器 一.函数名的运用. 函数名是一个变量,但它是一个特殊的变量,与括号配合可以执行函数的变量. 1.函数名的内存地址 def fun ...

  5. ADO.NET DBHelper

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...

  6. 【Selenium2】【Jenkins】

    1. 下载Tomcat ,Windows7 环境,http://tomcat.apache.org/  我下载的是版本8 2. 下载Jenkins,Windows7 环境,http://jenkins ...

  7. 利用React Native 从0到1 开发一款兼容IOS和android的APP(仿造京东)

    最近有一部电视剧叫做<微微一笑很傻逼>里面有个男猪脚,人们都叫他大神~我觉得吧~大神是相对的~所以~啥事都得谦虚! 好了 今天介绍的是如何从0到1利用React Native开发一款兼容I ...

  8. _itemmod_rate_stone

    `entry`几率宝石物品ID `type` 1--合成对应_itemmod_exchange_item 2--强化对应_itemmod_exchange_item 3-附魔(除itemMask = ...

  9. 【BZOJ】1798: [Ahoi2009]Seq 维护序列seq

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1798 大概就是维护两个标记的线段树模板题. 设定优先级,先乘后加(只是相对的),$push ...

  10. 【BZOJ】2734: [HNOI2012]集合选数

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2734 考虑$N=4$的情况: \begin{bmatrix} 1&3 &X ...