Vuejs Router Url鏈接隱藏參數、可選參數，使用路由組件屬性傳參，實現頁面間隱式可選傳參

之前說自爆學生身份是在裝逼，行，這次我就不說那麼多了。讓那些噴子自己亂吠吧，隨心寫寫就好。

目的

我有兩個頁面

• /user/login
• /index

我希望，在頁面跳轉時，可以相互傳參，且參數是可選的
即當我在/user/login登陸失敗時，我退轉回/index，並告知/index頁面顯示一個錯誤信息，實現頁面間的通信

最簡陋的方法

const router = new VueRouter({
  routes: [
    { path: '/index/:msg?', component: Index }
  ]
})

注意：我在:msg這個路徑參數後加了?，這樣的操作可以使msg變爲可選參數，參照path-to-regexp引擎及這裏的官方例子。

這種模式下，跳轉的路徑應該是/index/login_error，且參數可選。
在/index頁面中，使用$route.params.msg來獲取參數。

問題：在這樣的模式下，你會發現一旦需要傳參，/index頁面的路徑都會顯示出錯誤信息內容(msg)，這也會暴露頁面的參數定義。同時/index頁面組件需要通過$route.params.msg獲得參數，這不利於組件與路由的解耦

最完美的解決方式

我希望/user/login通知/index是隱式的，且通過props傳達參數，使組件能複用（解開與router的耦合）。

// Router definition
const router = new VueRouter({
  routes: [
    { name:'index', path: '/index', component: Index ,props: true }
  ]
})

// /user/login
if (!auth.pass){
	router.push({ name: 'index' , params: { msg: '登陸失敗!' } })
}

// /index
Vue.component('index', {
  props: ['msg']
  mounted: function () {
  	if (this.msg != null) {
      this.$q.notify({
        message: this.msg
      })
    }
  }
})

這樣子，跳轉到，且在瀏覽器現實的路徑是/index，然而msg已經傳達到位了
當然這個模式下，我覺得msg就不是路徑參數了，而是成爲了index組件的一個屬性props，自然也不會顯示在路徑中，大家覺得？