vue嵌套路由--params传递参数
在嵌套路由中,父路由向子路由传值除了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传递参数的更多相关文章
- vue嵌套路由-query传递参数(三)
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...
- Vue通过路由 query传递参数
父组件通过query来传递num参数为1,相当与在 url 地址后面拼接参数 <template> <div> <h3>首页</h3> <rout ...
- vue嵌套路由 && 404重定向
第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...
- vue嵌套路由与404重定向实现方法分析
第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rout ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- Vue 嵌套路由使用总结
Vue 嵌套路由使用总结 by:授客 QQ:1033553122 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https://nodejs.org/ ...
- vue设置路由跳转参数,以及接收参数
最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link :to ...
- vue嵌套路由总结
嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
随机推荐
- 解决Maven管理项目update Maven时,jre自动变为1.5
本文为博主原创,未经允许不得转载: 在搭建一个maven web项目时,项目已经按步骤搭建完好,之后项目上就报了一个错误. 在控制台看到错误提示如下:Dynamic Web Module 3.0 re ...
- usart2 重映射
今天拾起闲置很久的灰机,测试发现nrf2401坏掉,重新淘宝.还发现机上搭载的usart1坏掉,换成usart2,发现端口被电机占用,重映射到PD5,PD6 关键是后面两句不要忘记了 RCC_APB1 ...
- 七、面向对象编程(OOP)
面向对象编程:一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 1.类(class) class:自定义的对象数据类型.基于类创建多个对象,每个对象具备类的通用行 ...
- python学习 day011打卡 迭代器
本节的主要内容: 1.函数名的使用以及第一类对象 2.闭包 3.迭代器 一.函数名的运用. 函数名是一个变量,但它是一个特殊的变量,与括号配合可以执行函数的变量. 1.函数名的内存地址 def fun ...
- ADO.NET DBHelper
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Da ...
- 【Selenium2】【Jenkins】
1. 下载Tomcat ,Windows7 环境,http://tomcat.apache.org/ 我下载的是版本8 2. 下载Jenkins,Windows7 环境,http://jenkins ...
- 利用React Native 从0到1 开发一款兼容IOS和android的APP(仿造京东)
最近有一部电视剧叫做<微微一笑很傻逼>里面有个男猪脚,人们都叫他大神~我觉得吧~大神是相对的~所以~啥事都得谦虚! 好了 今天介绍的是如何从0到1利用React Native开发一款兼容I ...
- _itemmod_rate_stone
`entry`几率宝石物品ID `type` 1--合成对应_itemmod_exchange_item 2--强化对应_itemmod_exchange_item 3-附魔(除itemMask = ...
- 【BZOJ】1798: [Ahoi2009]Seq 维护序列seq
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1798 大概就是维护两个标记的线段树模板题. 设定优先级,先乘后加(只是相对的),$push ...
- 【BZOJ】2734: [HNOI2012]集合选数
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2734 考虑$N=4$的情况: \begin{bmatrix} 1&3 &X ...