vue 路由的作用，页面有参数和无参数跳转

Posted 2021-02-12 heson

无参数跳转：

使用路由标签跳转：

通过路由路径跳转：

<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.