我们要使用两种跳转方式,一种是路由带参跳转,一种是get跳转
- 首先在main.js注册路由
{ path: '/News', component: News },
//aid是带的参数为aid
{ path: '/Content/:aid', component: Content },
//使用get方式获取参数,正常注册路由就行
{ path: '/PContent', component: PContent },
- 下面是新闻组件代码,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>
- 下面是Content.vue代码,获取路由注册跳转带来的参数
<template>
<div>
我是详情
</div>
</template>
<script>
export default {
mounted(){
// 如果是路由参数则通过params获取
console.log(this.$route.params)
}
}
</script>
- 下面是PContent代码,获取get带来的参数
<template>
<div>
我是详情Get获取id
</div>
</template>
<script>
export default {
mounted(){
// 如果是get带的参数则用query获取参数
console.log(this.$route.query)
}
}
</script>