③. props的值为对象类型
3.props的值为对象类型
- ①. 注意:对象这种类型,id是不能传递过去的,因为props中没有id这个属性
- ②. 图解
④. props的值为函数类型
4.props的值为函数类型
- ①. 图解
②. 代码演示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <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-view></router-view> </div> </body> <script src="./lib/vue_2.5.22.js"></script> <script src="./lib/vue-router_3.0.2.js"></script> <script> const User={ props:['name','age','id'], template:` <!--路由组件中通过$route.params.id 获取路由参数--> <div> User component id: {{id}} 名字叫:{{name}} 年龄: {{age}} </div> ` }; const router=new VueRouter({ routes:[ //默认打开页面就能看到User componet id:1 {path:'/',redirect: '/user/1'}, //路由路径参数,以冒号开头 {path:'/user/:id',component:User, props:route=>({ name:'tangzhi', age:24, id:route.params.id }) } ] }); var vm=new Vue({ el:'#app', router }); </script> </html>
⑥. 命名路由的配置规则
6>. 命名路由的配置规则
- ①. 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。
- ②. 图解
⑦. 编程式导航
7>. 编程式导航
- this.$router.push(‘hash地址’)
- this.$router.go(n)
