vue-router 配置、跳转与传参

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.route.query和this.route.query和this.route.query和this.route.params