vue-router 配置、跳转与传参
一、配置
路由的配置属性书要有:path,name,component,redirect
基本配置:
{path:/,name:index,component:index}
路由重定向:
{path:'/'redirect:'/index'}
配置 mode:“history” 表示浏览器地址不需要 hash,即不显示 ’/#‘
二、跳转
主要有两种跳转方式
1.router-link标签的方式利用to属性进行跳转
<router-link v-for='(item,index) in table' :to="item.index">{{item.name}}</router-link>
2.事件跳转(this.$router.push)
<div @click="changeTab(item,index)" v-for="(item,index) in table">
{{item.name}}
</div>
methods:{
changeTab(item,index){
this.$router.push(name:item.index)
},
arrayDemo(){
}
},
三、传参
1.通过router-link标签传参
<router-link v-for='(item,index) in table' :to="{path:item.index,query:{id:item.id}}">{{item.name}}</router-link>
<router-link v-for='(item,index) in table' :to="{name:item.index,params:{id:item.id}}">{{item.name}}</router-link>
2.通过事件跳转时传值
methods:{s
changeTab(item,index){
this.$router.push({name:item.index,params:{id:item.id}})
this.$router.push({path:item.index,query:{id:item.id}})
},
arrayDemo(){
}
},
这里path和query对应传参的方式类似于get在地址栏可以看到,name和params对应传参的方式类似于post
获取参数的方式分别为:this. r o u t e . q u e r y 和 t h i s . route.query和this. route.query和this.route.params