vue跳转传参刷新后参数消失

一开始需要实现的功能是跳转到一个页面然后传入一个产品ID号，然后在目标页面用这个ID号显示具体的产品信息
我是用的方法是在template中使用router-link标签

<router-link to="/product"><a @click="routerTo(productId)" href="#">{{ item.name }}</a>
</router-link>
//将 productId 传入 /product 页面

routerTo():

routerTo(index){this.$router.push({ name:'product',params:{productId:index}});
}
//在product页面中可以直接使用productId属性了

上面的router-link方法是完全错误的，想要传参数这种方法确实可以传过去，但是只要页面刷新，参数就会消失！
所以要把router-link改为：

<router-link :to="{name:'product'}"><a @click="routerTo(productId)" href="#">{{ item.name }}</a>
</router-link>

vue跳转传参刷新后参数消失相关推荐

vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
vue 跳转页面带对象_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
vue路由跳转传参乱码解决
vue路由组件跳转传参中文乱码解决 -在路由传参 this.$router.push({path:"/index", query:{msg:encodeURI("我是消息 ...
Vue路由传参和接收参数
Vue 路由传参和接收参数主要有四种解决方法如下:
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
路由之间的转跳及传参
跳转路由之间的转跳可以通过两种方式实现: 1.通过官方提供的router-link标签实现,它与a标签相似,给我们提供跳转到某个路由的功能. 用法: <router-link to=" ...
Vue：路由传参的三种方式
文章目录前言方式一:params 传参(显示参数) 1.声明式 router-link 2.编程式 this.$router.push 方式二:params 传参(不显示参数) 1.声明式 rou ...

vue跳转传参刷新后参数消失

vue跳转传参刷新后参数消失相关推荐

最新文章

热门文章