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>