Vue全家桶——Vue Router路由简单用法（二）

上篇博文讲了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后退