vue-router query params 常规传值

Posted 2020-10-16

CodePen: vue-router pass by value

<div id="app"></div>

div {
  cursor: pointer;
}

var Main = Vue.extend({
  template: `<div @click="goSub">main click me</div>`,
  mounted() { // 重新渲染后显示传值内容
    var info = this.$route.query.info
    if(info) alert(info)
  },
  methods: {
    goSub() {
      this.$router.push({
        path: ‘sub‘,
        name: ‘sub‘, // router 声明加入 name 属性
        params: {info: ‘transmit is params‘} // params 方式, 传值不会附属在地址后面, 但是需要额外配置
      })
    }
  }
})

var Sub = Vue.extend({
  props: [‘info‘], // 将 params 植入 props 需要在 router 中声明 name 与 props 相关
  template: `<div @click="goMain">sub click me</div>`,
  mounted() { // 重新渲染后显示传值内容
    alert(this.info)
    // alert(this.$route.params.info) // 这样是正常获取, 上面的是在本组件声明 props 接入对应 params 同时在 router 声明 props: true
  },
  methods: {
    goMain() {
  this.$router.push({
    path: ‘main‘,
    query: {info: ‘transmit is query‘} // query 方式, 传值会附属在地址 hash 后面
  })
    }
  }
})

var router = new VueRouter({
  routes: [
    {path: ‘/main‘, component: Main, alias: ‘/‘},
    {path: ‘/sub‘, name: ‘sub‘, component: Sub, props: true} // 加入 name 属性使用 params 模式传值; 声明 props: true 在可以使用 this.xxx 的方式直接使用 params 传值
  ]
})

new Vue({
  el: ‘#app‘,
  router,
  template: ‘<router-view />‘
})

CodePen: vue-router pass by value