router-link跳转页面传递参数及页面刷新方法

使用router-link传参:

第一种:

路径:http://localhost:8080/goodListP?id=2

 

 

 

 跳转的页面获取参数:

 this.$route.query.id

 

 

 

第二种:

路径:http://localhost:8080/goodListP/2

 

 路由配置:

 

 

 

 跳转的页面获取参数:

this.$route.params.id;

 

 

问题:使用router-link跳转到页面时,页面要F5刷新一下才能获取到数据

解决方法如下:

第一种:

 

 加上一个点击事件进行刷新页面

@click.native:事件后面要添加.native,不然添加的事件不起作用,具体原因应该是router-link为了阻止a标签的默认跳转事件

 

 

 

 

 

 

第二种:

不给router-link添加点击事件,在跳转到的页面中加上以下代码:

 

转载于:https://www.cnblogs.com/zyl-930826/p/11510672.html

当使用 `router-link` 组件进行路由跳转时,如果刷新页面后需要保持当前路由链接的选中状态,可以使用 `router-link-active` 指令。 `router-link-active` 指令可以用来给某个元素绑定一个或多个 CSS 类名,当当前路由匹配到指定的路由时,该元素会自动添加这些 CSS 类名。 例如,你可以将 `router-link-active` 指令应用于 `<li>` 标签,然后指定一个 CSS 类名 "active",这样当路由匹配到该链接时,该元素就会自动添加 "active" 类名,从而实现选中效果。 ```html <ul> <li v-router-link="{ path: '/', exact: true }" router-link-active="active">首页</li> <li v-router-link="{ path: '/about' }" router-link-active="active">关于我们</li> <li v-router-link="{ path: '/contact' }" router-link-active="active">联系我们</li> </ul> ``` 在上面的示例中,我们使用 `v-router-link` 指令来生成路由链接,然后将 `router-link-active` 指令应用于每个 `<li>` 标签,并指定 "active" 类名。这样,在刷新页面后,如果当前路由匹配到某个链接,该链接所在的元素就会自动添加 "active" 类名,从而实现选中效果。 注意,`router-link-active` 指令可以应用于任何元素,不一定是 `<li>` 标签。另外,如果需要同时指定多个 CSS 类名,可以用数组来传递。例如: ```html <li v-router-link="{ path: '/', exact: true }" router-link-active="[ 'active', 'bold' ]">首页</li> ``` 这样,当路由匹配到该链接时,该元素就会同时添加 "active" 和 "bold" 两个类名。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值