vue之不同路由傳值的兩種方法：動態路由和get傳值

一、動態路由

1.步驟：

1.1 配置動態路由

const routes = [
  { path:'/home',component:Home},
  { path:'/news',component:News},
   
   // 動態路徑引數，以冒號開頭；
  { path:'/content/:aid',component:Content},
  { path:'*',redirect:'/home'},
];

1.2 在對應的頁面通過 this.$route.params 獲取動態路由的值

<script
 
>

  export default {
    data(){
      return {
        msg:"詳情"
      }
    },
    mounted() {
      console.log(this.$route.params);
    }
  }
</script>

2.例項演示

2.1 在main.js中配置動態路由

//2.配置路由
const routes = [
  { path:'/home',component:Home},
  { path:'/news',component:News},
  { path:'/content/:aid',component:Content},
  { path:'*',redirect:'/home'},
];
 

2.2 在news.vue中的連結路由

<template>
  <div>
    新聞元件
    <br>
    <button @click="emitHome()">給home元件廣播資料</button>
    <hr />
    <ul>
      <li v-for="(item,key) in list">
        <router-link :to="'/content/'+key">{{ item }}</router-link>
      </
 
li>
    </ul>
  </div>
</template>

2.3 在Content.vue中，通過mounted來測試獲取的aid

<script>

  export default {
    data(){
      return {
        msg:"詳情"
      }
    },
    mounted() {
      console.log(this.$route.params);
    }
  }
</script>

2.4 結果

二、get傳值

1.步驟：

1.1 在main.js檔案中配置路由

和普通路由配置一樣。

const routes = [
  { path:'/pcontent',component:Pcontent},
];

1.2 在home.vue檔案中連結路由

<ul>
      <li v-for="(item,key) in list">
　　　　　//通過get方式進行傳值
        <router-link :to="'/pcontent?aid='+key">{{item}}</router-link>
      </li>
    </ul>

1.3 在pcontent.vue中的 mounted 通過 this.$route.query來獲取傳入的物件

mounted() {
      this.msg=this.$route.query.aid
    }

2. 例項演示

2.1 在main檔案中配置路由

//1.建立元件
import Home from './components/Home.vue';
import News from './components/News.vue';
import Content from './components/Content.vue';
import Pcontent from './components/Pcontent.vue';


//2.配置路由
const routes = [
  { path:'/home',component:Home},
  { path:'/news',component:News},
  { path:'/content/:aid',component:Content},
  { path:'/pcontent',component:Pcontent},
  { path:'*',redirect:'/home'},
];

2.2 在home.vue檔案中連結路由

<template>
  <div>
    首頁元件
    <br>
    <button @click="emitNews()">給news元件廣播資料</button>
    <hr />
    <ul>
      <li v-for="(item,key) in list">
        <router-link :to="'/pcontent?aid='+key">{{item}}</router-link>
      </li>
    </ul>
  </div>
</template>

2.3 在pcontent.vue元件中獲取值

<template>
  <div>
    我是商品{{msg}}
  </div>

</template>

<script>
  export default {
    data(){
      return {
        msg:""
      }
    },
    mounted() {
      this.msg=this.$route.query.aid
    }
  }
</script>

2.4 結果