vue踩坑笔记03---路由的作用，页面跳转

无参数跳转：

使用路由标签跳转：

通过路由路径跳转：

<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会保存传递过来的值，刷新不变

那么问题来了，如果我又想让传的值不显示在地址栏，又想让传的值刷新页面后不消失，该怎么办呢？
先留个坑，以后填

---

个人学习总结，欢迎批评指正