Vue之帶參數路由跳轉

我們要使用兩種跳轉方式，一種是路由帶參跳轉，一種是get跳轉

1. 首先在main.js註冊路由

{ path: '/News', component: News },
//aid是帶的參數爲aid
{ path: '/Content/:aid', component: Content },
//使用get方式獲取參數，正常註冊路由就行
  { path: '/PContent', component: PContent },

2. 下面是新聞組件代碼，index爲2則用get跳轉方式，其他則用路由註冊跳轉方式

<template>
  <ol>
    <ul v-for="(item,index) in list" v-bind:key="item.id">
    
      <div v-if="index==2">
        <router-link :to="'/PContent?id='+index">{{index}}:{{item}}</router-link>
      </div>
      <div v-else>
        <router-link :to="'/Content/'+index">{{index}}:{{item}}</router-link>
      </div>
    </ul>
  </ol>
</template>
<script>
export default {
  data() {
    return {
      list: ["123", "456", "789"]
    };
  },
};
</script>

3. 下面是Content.vue代碼，獲取路由註冊跳轉帶來的參數

<template>
    <div>
        我是詳情
    </div>
</template>
<script>
export default {
    mounted(){
        // 如果是路由參數則通過params獲取
        console.log(this.$route.params)
    }
}
</script>

4. 下面是PContent代碼，獲取get帶來的參數

<template>
    <div>
        我是詳情Get獲取id
    </div>
</template>
<script>
export default {
    mounted(){
        // 如果是get帶的參數則用query獲取參數
        console.log(this.$route.query)
    }
}
</script>