学习要点:1.重定向 2.组件传参
本节课我们来开始了解 Vue router 的重定向和组件传参。
一.重定向
1. 使用 redirect,可以配置路由的重定向功能,有多种方式;
{ //当地址为/a 则跳转到首页 path : '/a', redirect : '/'},
{ //跳转到指定 name 的组件 path : '/a', redirect : { name : 'List' //或者 path 也支持 }},
2. 如果你要动态的处理跳转的路径,也就是支持逻辑判断,具体如下:
3. 路由可以设置别名,具体如下:
二.组件传参
1. 需求:我们希望 User/5 中获取 id 时变成{{id}}而不是{{$route.params.id}};
2. 有几种模式,先采用布尔模式,将路由规则增加一个属性:props:true;
//router/index.js{ path: '/user/:id', name: 'User', component: User, //这里布尔为 true 时,route.params 变成组件属性 props : true,}//User.vue <div> <h3>User Id : {{id}}h3> <router-view>router-view> div>template> export default { name: "User", props : ['id'] }</script>
3. 除了布尔模式,还有对于静态路由,可以使用对象模式;
//支持非命名视图的对象模式props : { data: '列表'},
<template> <h3>这里是 List 页面 : {{data}}h3>template>
<script>export default { name: "List", props : { data: { type : String, default : 'no data' } }}script>
//如果是命名视图,则需要特别指定哪个视图使用
props : { default : { name : '列表' }},
4. 如果采用经典的 query 进行传参,我可以使用如下方法:
如果您觉得有用,记得在下方点赞、关注、留言,小编会定期奉上更多的惊喜哦,您的打赏支持才是小编继续努力的动力,么么哒。
每日分享在学习过程中总结的学习经验,学习笔记,笔试题,HTML,CSS,JavaScript,jQuery教程,Vue教程,PHP教程,TinkPHP教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术,陪有梦想的人一起成长!