动态匹配路由的基本用法||路由组件传递参数

动态匹配路由的基本用法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><!-- 路由占位符 --><router-view></router-view></div><script>const User = {template: '<h1>User 组件 -- 用户id为: {{$route.params.id}}</h1>'}const Register = {template: '<h1>Register 组件</h1>'}// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user'},{ path: '/user/:id', component: User },{ path: '/register', component: Register }]})// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})</script></body>
</html>

路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

1. props的值为布尔类型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><!-- 路由占位符 --><router-view></router-view></div><script>const User = {props: ['id'],template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'}const Register = {template: '<h1>Register 组件</h1>'}// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user'},{ path: '/user/:id', component: User, props: true },{ path: '/register', component: Register }]})// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})</script></body>
</html>

2. props的值为对象类型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><!-- 路由占位符 --><router-view></router-view></div><script>const User = {props: ['id', 'uname', 'age'],template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'}const Register = {template: '<h1>Register 组件</h1>'}// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user'},{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },{ path: '/register', component: Register }]})// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})</script></body>
</html>

3. props的值为函数类型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link><!-- 路由占位符 --><router-view></router-view></div><script>const User = {props: ['id', 'uname', 'age'],template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'}const Register = {template: '<h1>Register 组件</h1>'}// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user' },{path: '/user/:id',component: User,props: route => ({ uname: 'zs', age: 20, id: route.params.id })},{ path: '/register', component: Register }]})// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})</script></body>
</html>

动态匹配路由的基本用法||路由组件传递参数相关推荐

React路由组件传递参数
向路由组件传递参数 1.params参数路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link>注册路由(声明接收):<Rou ...
vue前端面试题之vue组件传递参数
父子组件传递参数(props / $emit) 这个比较容易实现,我们只需要在组件上绑定自定义属性名就可以通过子组件中的props属性接受.看下面代码: 父组件代码parent.vue <tem ...
通过props从父组件传递参数到子组件爆红报错
错误总结:props传参报错问题通过props从父组件传递参数到子组件出现爆红报错: 查阅资料显示这是因为v-for循环遍历的data.slice(0,1)为空导致的,因为没有调取到data数据,所 ...
React学习笔记(五)之父子组件传递参数
父传子通过属性,父组件向子组件传递参数. this.state.list.map((item,index)=>{<todoItem content={item} /> } 子组件通 ...
Angular 路由时如何在 Component 之间传递参数
官网把 ActivatedRoute 和 ParamMap 导入你的组件. import { Router, ActivatedRoute, ParamMap } from '@angular/ro ...
安卓用于组件传递参数的对象是_入门篇：7.组件2:Android Service－service的数据传递与通信...
(由于对java的回调机制和线程理解的不够透彻,所以这块内容我理解了好久,尤其是绑定服务传递数据,一句一句写一句一句看,对我来说挺难理解的.以后还要多看几遍--!) 既然单纯的启动或跳转activit ...
vue-router向子组件传递参数
解决了什么问题 vue-router里父级获取到子组件的实例 <router-view ref="rRouter" :msg="12"></r ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
安卓用于组件传递参数的对象是_[南开大学]18秋学期（1709、1803、1809）《手机应用软件设计与实现》在线作业 ......
18秋学期(1709.1803.1809)<手机应用软件设计与实现>在线作业一.单选题: 1.[单选题]在AndroidManifes.xml中描述一个Activity时,该Activi ...

动态匹配路由的基本用法||路由组件传递参数

动态匹配路由的基本用法

路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦

动态匹配路由的基本用法||路由组件传递参数相关推荐

最新文章

热门文章