Vue.js中路由的编程式导航

在vue中书写路由分为声明式和编程式两种。

声明式导航：通过点击链接的方式实现的导航

<router-link to="/user">User1</router-link>

编程式导航：调用js的api方法实现导航 

this.$router.push( { name:'user' } )

编程式导航可以进行传参，并且减少了一层a标签的嵌套。

query形式:

this.$router.push({
    path: '/home',
    query: {
    name: this.name,
    pwd: this.pwd
    }
    })

在home中接收参数

created(){
    //注意，route是没有r的
    let {name,pwd} = this.$route.query
    this.name = name
    this.pwd = pwd
  }

params形式：

this.$router.push({
                name: 'home',
                params: {
                    name: this.name,
                    pwd: this.pwd
                }
            })

在home中接收参数

created(){
    //注意，route是没有r的
    let {name,pwd} = this.$route.parmas
    this.name = name
    this.pwd = pwd
  }

两者区别

query：

1.会将参数拼接到将参数拼接到地址中的?后面，类似于get请求。

2.刷新不会改变参数结果。

parmas：

1.将参数封装到内存的对象中传递，地址栏不会显示，类似于post。

2.刷新页面会清空参数。