vue页面跳转方式总结并获取传递的参数

一 : this.go("/home")
二 : this.$router.push("/home")。

三 : this.$router.push({path: "/home",query: this.seachData})。

四 :this.$router.go(-1);点击返回上一页 或this. r o u t e r . b a c k ( ) t h i s . router.back() this. router.back()this.router.go(val) => 在history记录中前进或者后退val步,当val为0时刷新当前页面。

五:<a @click="$router.push('/shopcart')" >

六 : @click="go(/home/id=KaTeX parse error: Expected 'EOF', got '&' at position 10: {item.id}&̲goods_id={item.goods_id})"

七:@click="$router.push({path:'/home',query:{goods_id:data.goods_id}})"

八:<router-link to="/home"首页</router-link

九:<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

vue之this. r o u t e . q u e r y 和 t h i s . route.query和this. route.querythis.route.params的使用与区别

在另一个页面接受传参
获取传递的参数:this.$route.query。xx(传递的名字)

在另一个页面接受传参
this.$route.params.shopid
传参数( params相对应的是name query相对应的是path)

怎么定义 vue-router 的动态路由? 怎么获取传过来的值

在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 router 对象的 params.id 获取。
栗子:
this. r o u t e r . p u s h ( ‘ / p a y / router.push(`/pay/ router.push(/pay/{order_price}/${sub_order_id}?show=0&xiu=1`);

列表进入详情页的传参问题。
例如商品列表页面前往商品详情页面,需要传一个商品id;

<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>

c页面的路径为http://localhost:8080/#/detail?id=1,可以看到传了一个参数id=1,并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据,获取id的方式是

this.$route.query.id

vue传参方式有:query、params+动态路由传参。
params、query不设置也可以传参,params不设置的时候,刷新页面或者返回参数会丢失
query在浏览器地址栏中显示参数,params则不显示
说下两者的区别:

1.query通过path 或者name切换路由,params通过name切换路由,
// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

2.query通过this. r o u t e . q u e r y 来 接 收 参 数 , p a r a m s 通 过 t h i s . route.query来接收参数,params通过this. route.queryparamsthis.route.params来接收参数。

// query通过this.$route.query接收参数
created () {
    const id = this.$route.query.id;
}

// params通过this.$route.params来接收参数
created () {
    const id = this.$route.params.id;
}

3.query传参的url展现方式:/detail?id=1&user=123&identity=1&更多参数 params+动态路由的url方式:/detail/123

4.params动态路由传参,一定要在路由中定义参数,然后在路由跳转的时候必须要加上参数,否则就是空白页面:

{      
    path: '/detail/:id',      
    name: 'Detail',      
    component: Detail    
},

注意,params传参时,如果没有在路由中定义参数,也是可以传过去的,同时也能接收到,但是一旦刷新页面,这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的,因为你总不可能要求用户不能刷新页面吧。 例如:

// 定义的路由中,只定义一个id参数
{
    path: 'detail/:id',
    name: 'Detail',
    components: Detail
}

// template中的路由传参,
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数,而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>

// 在详情页接收
created () {
    // 以下都可以正常获取到
    // 但是页面刷新后,id依然可以获取,而token此时就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}
注,params的参数也是显示在地址栏的,如果不想显示在地址栏,可以在缓存或者vuex
js跳转
在新窗口打开 window.open(‘路径’)
在本业内跳转  window.location.href='路径'
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值