vue 路由的作用，頁面有參數和無參數跳轉

無參數跳轉：

使用路由標簽跳轉：

通過路由路徑跳轉：

<router-link :to="{path:'/fruit/apple'}">apple</router-link>

此時的path就是注冊路由時的path，也就是路由的路徑。
可以簡寫為。

<router-link to="/fruit/apple">apple</router-link>

通過路由名稱跳轉:

<router-link :to="{name:'apple'}">apple</router-link>
此時的name就是注冊路由時的name，也就是路由的名稱。
用路由跳轉的方式會給要跳轉的元素加上a標簽，可以通過tag屬性，自定義跳轉元素的標簽

<router-link tag="button" :to="{path:'/fruit/apple'}">apple</router-link>
此時跳轉元素為button
<router-link tag="span" :to="{name:'apple'}">apple</router-link>
此時跳轉元素為span

使用使用methods跳轉：

<button @click="fn">apple</button>

methods: {
  fn: function () {
    this.$router.push({ path: 'fruit/apple' })
    this.$router.push({ name: 'apple' })
  }
}

有參數跳轉：

使用路由標簽跳轉

<router-link :to="{path:'/fruit/apple',query:{msg:this.msg}}">apple</router-link>
<router-link :to="{name:'apple',params:{msg:this.msg}}">apple</router-link>

其中query和params為傳遞的參數。

使用methods跳轉

<button @click="fn">apple</button>

methods: {
  fn: function () {
    this.$router.push({ path: 'fruit/apple', query: { msg: this.msg } })
    this.$router.push({ name: 'apple', params: { msg: this.msg } })
  }
}

子頁面接收父頁面參數：

data () {
  return {
    // query接收參數
    aaa: this.$route.query.msg,
    // params接收參數
    bbb: this.$route.params.msg
  }
}

跳轉的時候用的是this.$ router，接收的時候用的是this.$ route

query傳參和params傳參的區別：

1.query傳參配置的是path，而params傳參配置的是name

     query傳參后的頁面地址：參數會顯示在地址欄（相當於get）

http://localhost:8082/#/fruit/apple?msg=Welcome%20to%20Your%20Vue.js%20App
params傳參后的頁面地址：參數不會顯示在地址欄（相當於post）
http://localhost:8082/#/fruit/apple

2.params傳參刷新會無效，但是query會保存傳遞過來的值，刷新不變

如果我又想讓傳的值不顯示在地址欄，又想讓傳的值刷新頁面后不消失,使用vuex.