vuejs之【router-link】大全(二)
Vue路由
1.用name传递参数
在路由文件里配置name属性
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
在.vue模板里用$router.name的形式接收:<p>{{ $route.name}}</p>
2.通过<router-link> 标签中的to传参
<router-link>标签中的to属性进行传参,需要对to进行一个绑定,用:to。
格式:
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
用法:
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
路由配置:
{path:'/hi1',name:'hi1',component:Hi1}
页面接收:
{{$route.params.username}}
3.单页面多路由区域操作
<router-view ></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view>
路由配置:
export default new Router({
routes: [
{path: '/', components: { default:Hello, left:Hi1, right:Hi2 }},
{path: '/Hi', components: {default:Hello, left:Hi2, right:Hi1 }}
]
})
4.vue-router利用url传递参数
:冒号的形式传递参数
配置路由:
{ path:'/params/:newsId/:newsTitle' , component:Params }
.vue组件中:
用法:<router-link to="/params/198/jspang website is very good">params</router-link>
取值:
<p>新闻ID:{{ $route.params.newsId}}</p>
<p>新闻标题:{{ $route.params.newsTitle}}</p>
正则表达式在URL传值用法:
要求传递参数ID只能是数字的形式,传值时有个基本类型判断
用法:path:'/params/:newsId(\\d+)/:newsTitle',
5.redirect基本重定向
{ path:'/goback' , redirect:'/' }
重定向时传递参数
{ path:'/goParams/:newsId(\\d+)/:newsTitle' , redirect:'/params/:newsId(\\d+)/:newsTitle' }
6.alias别名的使用
路由配置: { path: '/hi1', component: Hi1, alias:'/jspang' }
用法:<router-link to="/jspang">jspang</router-link>
注意:
别名请不要用在path为’/’中,如下代码的别名是不起作用的。
{ path: '/', component: Hello, alias:'/home'}
7.路由中的钩子
(1)路由配置文件中的钩子函数,只能写一个beforeEnter
{
path:'/params/:newsId(\\d+)/:newsTitle',
component:Params,
beforeEnter:(to,from,next)=>{
console.log('我进入了params模板');
console.log(to);
console.log(from);
next();
},
三个参数:
- to:路由将要跳转的路径信息,信息是包含在对像里边的。
- from:路径跳转前的路径信息,也是一个对象的形式。
- next:路由的控制参数,常用的有next(true)和next(false)。
(2)在模板中的钩子函数
beforeRouteEnter:在路由进入前的钩子函数。
beforeRouteLeave:在路由离开前的钩子函数。
转载于:https://www.cnblogs.com/Abner5/p/7768480.html
vuejs之【router-link】大全(二)相关推荐
- linux词语大全,简单词语大全二字学习软件-简单词语大全四字下载v1.5.3-Linux公社...
简单词语大全二字学习软件是一款可以让用户快速背单词的软件,这款软件为用户提供了英语内容搭配影音的例句,让用户可以轻松学习英语.其中,用户可以在简单词语大全二字学习软件上对多人进行挑战,看自己的英语水平 ...
- C语言22选5体育彩票系统,22选5选号方法大全(二)
22选5选号方法大全(二) 守号中得22选5一等奖15万 第05094期联网22选5爆出4注单注奖金高达15万元的一等奖,我省青岛彩民魏先生(化名)锁定三个"重点"号码并坚持不懈地 ...
- 电脑硬件知识大全(二)
电脑硬件知识大全(二) 2010年11月11日 (1):BIOS信息部分: / t/ A3 B3 `# P5 D7 |8 hbbs.236z.com升级主板BIOS,找主板的信息: ]3 u( A&a ...
- 乱码大全(二) (转)
乱码大全(二) (转)[@more@] 2. XxencodeXML:namespace prefix = o ns = "urn:schemas-microsoft-com:Office: ...
- router link to
转载自:https://www.cnblogs.com/yangchin9/p/11005187.html 一.标签路由 router-link 注意:router-link中链接如果是'/'开始就是 ...
- 数据结构面试大全(二) - [算法]
版权声明 :转载时请以超链接形式标明文章原始出处和作者信息及本声明 http://lzhshen.blogbus.com/logs/20356236.html 10, strstr() 的简单实现 s ...
- Oracle SQL语句大全(二)
avg(sal) desc; 查找部门中平均薪水打印2000的员工并按部门号进行排序,查询分组后的平均薪水必须大于1500,查询结果按平均薪水从低到高排列 49.select ename from e ...
- oracle+5秒钟一个间隔,ORACLE日期时间函数大全 (二)
13.年月日的处理 select older_date, newer_date, years, months, abs( trunc( newer_date- add_months( older_da ...
- 米的换算单位和公式_米的单位换算公式大全二年级(简便易记的单位米换算方法)...
在小学数学的学习中,单位换算贯穿始终.无论是在小升初数学考试中,还是在生活方面,都会涉及单位换算的问题.在小学阶段,主要涉猎的单位换算包括长度.面积.体积.重量.人民币以及时间方面的换算. 由于换算值 ...
- NodeJs+VueJs +前端实现批量打印二维码
第一步 :html 设置DIV,用于存放批量生成的二维码 <div class="x_panel" style="margin:0 auto;display:n ...
最新文章
- Unity NetWork
- Fabric 架构和概念
- 删除排序数组中的重复数字 II
- python 运算符重载_Python3面向对象-运算符重载
- 悬镜安全宣布完成数千万元Pre-A轮融资
- 银行转账JAVA异常_Java多线程银行转账,同步问题
- 全国各省份简称、省会、经纬度
- matplotlib-04 xlabel设置x轴的标签
- 故障树手册(Fault Tree handbook)(4)
- JS之class的前世今生
- 量化交易入门阶段——布林带能做超跌反弹吗?
- [AX2012] 用户权限模拟与测试工具
- USB隨身碟格式化工具程式—HPUSBFW
- Matlab GUI鼠标画线
- itunes正在等待iphone_iphone的恢复模式DFU
- [bzoj1143][二分图匹配]祭祀
- 手动管理采购订单周期的挑战以及如何应对
- FLUENT直管流动压力损失仿真分析问题
- CSU-2220 Godsend
- 网页制作基础大二dw作业HTML+CSS+JavaScript云南我的家乡旅游景点