路由跳转的方式和传参——方式之声明式导航、编程式导航 & 传参之params和query

路由跳转的方式和传参——方式之声明式导航、编程式导航 & 传参之params和query

1. 路由跳转的2种方式

第一种：声明式导航

  router-link（必须要有to属性），可以实现路由的跳转

2. 编程式导航

  利用的是组件实例的$router.push|replace方法，可以实现路由的跳转

编程式导航优于声明式导航，编程式导航在跳转之前可以先处理一些业务

2.1 跳转

参数

1、params参数——属于路径中的一部分，但在我们配置路由的时候需要占位
2、query参数——不属于路径中的一部分，（/index?k=v） 不需要占位

写法

  // 字符串写法
  this.$router.push('/world/' + this.text + '?password=' + this.password)
  // 模板字符串写法
  this.$router.push(`/world/${this.text}?password=${this.password}`)
  /*
    对象写法
    需要在router/index.js文件里面给需要跳转的路由命名
    {
      path: '/world/:keyword?',
      component: () => import('../pages/world/world-index.vue'),
      name:'world'
    }
  */
  this.$router.push({
    name: 'world',
    params: {
      keyword: this.text
    },
    query: {
      password: this.password
    }
  })

一直点击跳转会抛出异常

一直点击的话会有报错，是因为vue-router来设计的时候采用了promise ，
所以我们需要增加成功和失败的回调就可以解决：

  this.$router.push({
    name: 'world',
    params: {
      keyword: this.text
    },
    query: {
      password: this.password
    }
  },()=>{},()=>{})