主要操作技能:
官网
https://router.vuejs.org/
中文网
https://router.vuejs.org/zh/guide/
一、不同路由传值:动态路由
1>配置路由
routes:[
//动态路径参数,以冒号开头
{path:'/detail/:aid',component:Detail}
]
2>在对应的页面获取路由的值
this.$route.params
3>动态路由
<router-link :to="'/detail/'+key"></router-link>
<router-link :to="'/detail?id='+key"></router-link>
一、直接传值
News.vue
<template>
<div id="news">
<h2>我是新闻组件</h2><br />
<ul>
<li v-for="(item,key) in list">
<!--通过路由,跳转到详情页面哦,并将新闻数据传入到详情页面-->
<!--<router-link to='/detail/123'> {{key}}--{{item}}</router-link> -->
<!--动态路由,将具体的值传过去-->
<router-link :to="'/detail/'+key"> {{key}}--{{item}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
msg: '我是新闻组件哦!',
list:['翠花','吉吉国王','熊二']
}
}
}
</script>
Detail.vue
<template>
<div id="detail">
<h3>我是详情</h3>
</div>
</template>
<script>
export default{
data(){
return{
msg:'my detail!'
}
},
mounted(){ //生命周期
console.log(this.$route.params); //获取动态路由传值
}
}
</script>
效果
固定传值123
动态传值key=0,1,2...
二、Get传值:
Home.vue
<template>
<!--所以的内容多要被根节点包含起来 -->
<div id="home">
<h3>首页组件</h3><br />
<ul>
<li v-for="(item,key) in list">
<!--get传值-->
<!--<router-link to="/product?id=123">
{{key}}--{{item}}
</router-link>-->
<!--动态传值-->
<router-link :to="'/product?id='+key">
{{key}}--{{item}}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() { //数据
return {
msg: 'I am home component!',
list:['product1','product2','product3']
}
}
}
</script>
Product.vue
<template>
<div id="detail">
<h3>商品详情</h3>
</div>
</template>
<script>
export default{
data(){
return{
msg:'my detail!'
}
},
mounted(){ //生命周期
//获取get传值
console.log(this.$route.query);
}
}
</script>
效果:
固定参数123
动态传值 key=0,1,2....