Vue-router(三) 参数传递
为什么80%的码农都做不了架构师?>>>
开发中,参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式,这节课我们就看看vue-router为我们提供了那些传递参数的功能。
一、用name传递参数
name传值是如何传递,共计两步就可以实现:
在路由文件src/router/index.js里配置name属性。注意,如果有子路由,必须配置到子路由的name属性。
routes: [{path: '/',name: 'Hello',component: Hello}]
模板里(src/App.vue)用$router.name的形势接收,比如直接在模板中显示:
<p>{{ $route.name}}</p>
使用name传递项目中多数传参是不用使用,多数会通过下面介绍的方式传递。
二、通过<router-link> 标签中的to传参
用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to。先来看一下这种传参方法的基本语法:
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.
- name:就是我们在路由配置文件中起的name值。
- params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
了解基本的语法后,我们改造一下我们的src/App.vue里的<router-link>标签,我们把Hi1页面的<router-link>进行修改。
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.
<h2>{{ $route.params.username}}</h2>
以上就是如何通过<router-link>标签中的to属性进行传参。
附完整的文件代码
src/App.vue
<template><div id="app"><img src="./assets/logo.png"><!-- 导航 --><div><router-link to="/">Hello</router-link>|<router-link to="/Hi">Hi</router-link>|<!-- 使用 router-link to 传值 --><router-link :to="{name:'Hi1',params:{username:'lvgang'}}">Hi1</router-link>|<router-link to="/Hi/Hi2">Hi2</router-link></div><!-- 使用 name 传值 --><p>{{ $route.name}}</p><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
src/components/Hi1.vue
<template><div><h2>{{message}}</h2><h2>{{ $route.params.username}}</h2></div>
</template>
<script>
export default {name: "Hi",data() {return {message : 'Wo Shi Hi1!'};}
};
</script>
<style scoped></style>
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 引入Hi
import Hi from '@/components/Hi'
// 引入Hi1
import Hi1 from '@/components/Hi1'
// 引入Hi2
import Hi2 from '@/components/Hi2'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},// 配置Hi对象{path: '/Hi',component: Hi,//引子路由children:[{path:'/',name: 'Hi',component:Hi},{path:'Hi1',name: 'Hi1',component:Hi1},{path:'Hi2',name: 'Hi2',component:Hi2},]}]
})
转载于:https://my.oschina.net/sdlvzg/blog/1798178
Vue-router(三) 参数传递相关推荐
- (50)Vue Router插件介绍
一.Vue Router插件介绍 Vue Router 是 Vue.js 的官方插件,用来快速实现单页应用. 二.Vue Router学习内容 • 单页应用 • 前端路由 • Vue Router 三 ...
- VUE探索第三篇-路由(vue router)
一.vue router介绍 Vue Router是Vue.js官方的路由器,页面间的跳转(比如A->B->C)是一组路由,而Vue Router是管理这些路由的集成器.Vue Route ...
- Vue中路由管理器Vue Router使用介绍(三)
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 {path:'/user/:id/:name', ...
- Vue源码 Vue Router(三)matcher 路由匹配器
Vue源码 Vue Router(三)matcher Vue源码 Vue Router(三)matcher matcher createMatcher addRoutes match 总结 单步调试参 ...
- 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 ...
最新文章
- c++采集声卡输出_耳上明珠 | 魅族双 C 耳机 — EP2C
- AI大军又添猛将:海云数据宣布“双亿元AI扶持计划”
- python 青蛙跳台阶问题
- webpack从入门到精通(一)初体验
- Android 使用本地应用在线播放流媒体文件
- Codeforces 724C Ray Tracing 扩展欧几里得
- 使用Spring Roo进行快速云开发–第2部分:VMware Cloud Foundry
- 飞行棋 c语言,骑士飞行棋【纯c】
- 这五个超强PPT技巧,从小白到大神的距离只差这一点!
- python学习方法_十二种学习Python的方法
- 离婚算法:说不清的感情对错,但算得清的财产分割
- oracle12漏洞补丁下载,linux oracle 11g 漏洞补丁升级
- leetcode python3 简单题111. Minimum Depth of Binary Tree
- Spring配置属性文件
- Haar特征与积分图
- 第三届阿里云磐久智维算法大赛——GRU BaseLine
- outlook邮箱收件服务器密码,微软邮箱(hotmail+outlook):应用密码获取+STARTTLS加密...
- 长平之战后的秦赵又一次决战——邯郸保卫战_我是亲民_新浪博客
- 我被炒了! 一位36岁程序员的的焦虑与困惑...
- 最优化技术——单纯形法