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.params