vue-router路由跳转方式与传参

vue-router跳转的三种方式,以及它们相对应的自己的传参规则。

 

一、使用router-link标签

1.简单使用:

a.在router的index.js文件设置:

{
    path: "/detail",
    name:"Detail",
    compoent: Detail
}

b.标签使用:

<router-link tab="li" class="list-item" v-for="(item,index) in list" :key="item.id" :to="/detail"></router-link>

2.传参

(1) 传单个参数:

a. 在router的index.js文件设置:

{
    path: "/detail/:id",
    name:"Detail",
    compoent: Detail
}

b.标签使用:

<router-link tab="li" class="list-item" v-for="(item,index) in list" :key="item.id" :to=" '/detail/' + index"></router-link>

(2) 传多个参数:

a. 在router的index.js文件设置:

{
    path: "/detail/:id/:title",
    name:"Detail",
    compoent: Detail
}

b.标签使用:

<router-link tab="li" class="list-item" v-for="(item,index) in list" :key="item.id" :to=" '/detail/' + index + '/' + item.title"></router-link>

 

注意:这种传参方式是URL传参,参数会出现在URL链接上,如:http://localhost:8080/#/detail/0/度假村

 

路由的参数接收用: this.$route.params(注意是$route不是$router哦~)

 

二、使用name设置

 

1.在元素上绑定事件:

<img class="item-img" :src="item.imgUrl" alt="" @click="goDetail(item.id,item.title)">

2.定义事件,做路由跳转并传参:

methods: {
    goDetail (id,title) {
        this.$router.push({ name:'Detail',params: {id: id, title: title} })
    }
}

 

路由的参数接收用: this.$route.params(注意是$route不是$router哦~)

 

三、使用path设置

 

1.在元素上绑定事件:

<img class="item-img" :src="item.imgUrl" alt="" @click="goDetail(item.id,item.title)">

2.定义事件,做路由跳转并传参:

methods: {
    goDetail (id,title) {
        this.$router.push({ path:'Detail',query: {id: id, title: title} })
    }
}

路由的参数接收用: this.$route.query(注意是$route不是$router哦~)

 

 

使用name和path方式很相似,但是path方式的参数会出现在url中,如:http://localhost:8080/#/?id=0001&title=beijing,如ajax请求的get请求,而name的方式像post请求