vue踩坑筆記03---路由的作用，頁面跳轉

• 無引數跳轉：
• 使用路由標籤跳轉：
• 通過路由路徑跳轉：
• 通過路由名稱跳轉：
• 使用使用methods跳轉：
• 有引數跳轉：
• 使用路由標籤跳轉：
• 使用使用methods跳轉：
• 子頁面接收父頁面引數：
• query傳參和params傳參的區別：

無引數跳轉：

使用路由標籤跳轉：

通過路由路徑跳轉：

<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會儲存傳遞過來的值，重新整理不變

那麼問題來了，如果我又想讓傳的值不顯示在位址列，又想讓傳的值重新整理頁面後不消失，該怎麼辦呢？
先留個坑，以後填

個人學習總結，歡迎批評指正