vue-router如何参数传递

1.我们用<router-link>标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to

先来看一下这种传参方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，然后后边跟的是一个对象形势的字符串.

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

2.我们把hi1页面的<router-link>进行修改。

<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>

　　把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

 {path:'/hi1',name:'hi1',component:Hi1},

　　最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}

　　代码：

HI1.vue

<template><div class="hello"><h1>{{msg}}-{{$route.params.username}}</h1></div>
</template>

HI2.vue

<template><div class="hello"><h1>{{msg}}-{{$route.params.username}}</h1></div>
</template>

　APP.vue

<template><div id="app"><img src="./assets/logo.png"><p>导航 ：<router-link to="/">首页</router-link><router-link to="/hi">Hi页面</router-link><router-link :to="{name:'hi1',params:{username:'德国'}}">Hi页面1</router-link><router-link :to="{name:'hi2',params:{username:'巴西'}}">Hi页面1</router-link></p><router-view/></div>
</template>

　　index.js

　效果：

2018-06-18 10:46:59

转载于:https://www.cnblogs.com/guangzhou11/p/9194642.html

vue-router如何参数传递相关推荐

Vue Router 4.0 正式发布！焕然一新。
关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习 12月8日,Vue Router 4 正式发布稳定版本. 在经历了 14 个 Alph ...
【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍轻量级.可靠的移动端 Vue 组件库有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性拥 ...
Vue Router 实现路由控制实战
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. Vue Router 实现路由控制实战前言一.什么是单页面应用及实现前端路 ...
Vue Router：vue中实现前端路由
Vue Router 官方文档文章目录一.路由简介路由分类路由安装二.路由基本使用安装路由器并设置路由规则实现路由切换指定组件的呈现位置 this中的 $router 和 $route ...
Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
Vue | Vue Router 路由的使用
文章目录一.路由的基本使用 1.创建 Vue 项目并引入 vue-router 2.编写 Components 组件 3.编写路由文件 4.在主文件 Main.js 中引入路由 5.添加 route ...
VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
Vue Router详细教程
1.什么是路由 1.1路由简介说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科额,啥玩意? 没听 ...
vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效即 ...
你可能不清楚的 Vue Router 深度用法（一）
Vue Router 简单易上手,能实现大部分的需求.但是,如果在项目里需要更细致的控制路由,以实现与其同步的效果,就需要挖掘其文档里没详细提及的内容.第一章为路由元信息用途挖掘. 路由元信息用途 ( ...

vue-router如何参数传递

vue-router如何参数传递相关推荐

最新文章

热门文章