上篇博文讲了Vue Router的一些简单介绍用法,接下来我们继续深入了解一下。
**
1.动态匹配路由
**
我们在调用ajax接口的时候附带值的情况很多,那么路由也可以附带一些值
1.1通过$ route.params.id
< router-link to="/user/1">user< /router-link>
var User = { template:"< div>用户:{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
{ path: "/user/:id", component: User }]
1.2我们可以通过props来接收参数
var User = {
props:["id"],
template:"<div>用户:{{id}}</div>"
}
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过/:参数名 的形式传递参数
//如果props设置为true,route.params将会被设置为组件属性
{ path: "/user/:id", component: User,props:true }]
1.3我们可以将props设置为对象,那么就直接将对象的数据传递给组件进行使用,但是这样就不可以动态获取到id值
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} }]
1.4如果想要获取传递的参数值还想要获取传递的对象数据,那么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}
}
}]
**
2.命名路由
**
即给路由起一个名字。这样我们便可以通过name找到路由减少不必要的BUG
var myRouter = new VueRouter({
//routes是路由规则数组
routes: [
//通过name属性为路由添加一个别名
{ path: "/user/:id", component: User, name:"user"}]
})
//添加了别名之后,可以使用别名进行跳转
<router-link to="/user">User</router-link>
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>
**
3.编程式导航
**
页面导航的两种方式:
声明式导航:通过点击链接的方式实现的导航。
编程式导航:调用js的api方法实现导航。
编程式导航使用api方法配合触发事件也可以进行页面的导航。Vue Router常用的导航方式有:
//push相当于入栈出栈,只是把前一个页面给盖住了,还会有历史记录,可以通过go回退回去
this.router.push("hash地址");
this.router.push("/login");
this.router.push({ name:'user' , params: {id:123} });
this.router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
//跳转到指定的url,但是不会向history里面添加新的记录,点击返回,会跳转到上上个页面。上一个记录是不存在的。
this.$router.replace()
this.router.go( n );//n为数字,参考history.go
this.router.go( -1 ); //0刷新 1前进 -1后退