本文已参与「新人创作礼」活动，一起开启掘金创作之路。
6.如果使用$route.params.id来获取路径传参的数据不够灵活。
1.我们可以通过props来接收参数
var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名 的形式传递参数 //如果props设置为true，route.params将会被设置为组件属性 { path: "/user/:id", component: User,props:true },
]
})
2.还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给 组件进行使用
var User = { props:["username","pwd"], template:"<div>用户：{{username}}---{{pwd}}</div>" }
var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名 的形式传递参数 //如果props设置为对象，则传递的是对象中的数据给组件 { path: "/user/:id", component: User,props:{username:"jack",pwd:123} },
]
})
3.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为 函数形式。
var User = { props:["username","pwd","id"], template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>" }
var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过/:参数名 的形式传递参数 //如果props设置为函数，则通过函数的第一个参数获取路由对象 //并可以通过路由对象的params属性获取传递的参数 // { path: "/user/:id", component: User,props:(route)=>{ return {username:"jack",pwd:123,id:route.params.id} } },
]
})
7.命名路由以及编程式导航
A.命名路由：给路由取别名
案例：
var myRouter = new VueRouter({ //routes是路由规则数组 routes: [ //通过name属性为路由添加一个别名 { path: "/user/:id", component: User, name:"user"},
]
})
//添加了别名之后，可以使用别名进行跳转 User User
//还可以编程式导航 myRouter.push( { name:'user' , params: {id:123} } )
####B.编程式导航(★★★) 页面导航的两种方式： A.声明式导航：通过点击链接的方式实现的导航 B.编程式导航：调用js的api方法实现导航
Vue-Router中常见的导航方式： this.router.push("/login"); this.router.push({ path:"/login" }); this.$router.push({ path:"/login",query:{username:"jack"} });
this.router.go( -1 );
