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

vue-router query params 常規傳值