vue頁面傳參

 vue頁面跳轉，傳參方式大約可以有下面3種情況。

• 標簽跳轉及傳參（router-link）
• js控制跳轉路由及傳參（this.$router.push）
• 路由組件傳參

　　下面看一下這3者。

　　一、標簽跳轉及傳參

　　:to后面可以跟字符串也可以跟對象。

<template>
  <div id="app">
    <div><router-link :to="/">首頁</router-link></div>
    <div><router-link :to="{path:'/news/detail',query:{id:1}}">詳情</router-link></div>
    <div><router-link :to="{name:'newsDetail',params:{id:1}}">詳情</router-link></div>
  </div>
</template>

　　頁面接參方式如下

　　使用path + 路徑，query + 參數。則用this.$route.query.id取值。

　　使用name +路由名稱，params + 參數。則用this.$route.params.id取值。

　　二、$router.push

　　js控制跳轉路由傳參如下：

　　

 

　　三、路由組件傳參

　　官網地址：https://router.vuejs.org/zh/guide/essentials/passing-props.html

　　首先：路由部分

let routes = [
{
          path: '/news',
          name: 'news',
          props: true,
          meta: {},
          component: () => import('@/page/news.vue')
        },   
      {
          path: '/newsDetail/:id',
          name: 'newsDetail',
          props: true,
          meta: {},
          component: () => import('@/page/newsDetail.vue')
        }   
]    

　　需要加參數的部分參考 newsDetail ，path后面跟占位符，props設置為波爾類型，true。

　　跳轉頁面時使用this.$router.push傳參。

　　下面是取值的方式

　　

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '123
    }
  },
  props:['id'],
  mounted(){
    console.log(this.$route.params.id, this.id)
  }
}

　　取值時，方法1：可以直接使用this.$route.params.id取值。

　　　　　　方法2：也可以先放到props中，就可以直接用this.id拿到了。