view路由传参方法

查看Vue教程(路由Router-传值) - 云+社区 - 腾讯云得到两种方法进行尝试得到可行

第一种方式：

1.route-link中配置如下段代码所示

<template><ul>                                                               <li v-for="item,index in recommendedtypes" @click="change(item.id)" :class="{current:item.id==typeid}"><router-link :to="{path:'/community/recommended/'+item.id}" >{{item.typename}}</router-link></li><router-view></router-view></ul>
</template>

2.router.js中配置：

{path:"/community/recommended/:typeid",component:recommendeddetail
}

3.recommendeddetail.vue文件中获取typeid的值：

组件模板中设置直接获取值配置：{{$route.params.typeid}}

通过1.2步的操作 typeid值会挂载到组件实例里的$route中，可通过this.$route.params.typeid获取

export default{data(){return{typeid:this.$route.params.typeid}},updated() {this.typeid = this.$route.params.typeid}
}

第二种写法：与上面这种方法类似

1.route-link中配置如下段代码所示

<ul><li v-for="item,index in classification" @click="change(item.id)" :class="{current:typeid==item.id}" ><router-link :to="{path:'/shopping/classification',query:{typeid:item.id}}" >{{item.name}}</router-link></li>
</ul>

2.router.js中配置：

{path:"/shopping/classification",component:classification
}

3.classification.vue中的配置

<template><p>分类详情界面{{$route.query.typeid}}{{typeid}}</p>
</template><script>export default{data(){return{typeid:this.$route.query.typeid}},updated() {this.typeid= this.$route.query.typeid}}
</script>

view路由传参方法相关推荐

vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
angular路由传递参数_详解Angular5 路由传参的3种方法
本文介绍了Angular5 路由传参,一共3种方法.分享给大家,具体如下: 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product? ...
Flask03_路由传参
# encoding=utf-8 """ 1.@app.route("/路由匹配/"):代表资源在服务器上的位置 (1)路由:Flask根据http请 ...
Flutter路由传参
Flutter路由传参 1.普通路由 2.路由拦截onGenerateRoute 1.普通路由 //main.dart routes: routes, // 路由跳转 onTap: () {// 跳转 ...
uniapp页面路由传参
最近做的项目碰到页面传参的问题,看文档办法觉得很麻烦,就试着用路由传参,效果如下 <template><view class="content"><i ...
React通过url传参和通过路由传参
是基于我写的上一篇文章<用react的路由写一个简单的导航>上面扩展出来的,朋友们可以去康康. 通过url传参的方法有: 1)直接? 接收:this.props.location.sear ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
id vue2路由传参_Vue2.0中 $route 和 $router 的区别
在做Vue项目时,在路由设置和跳转时有没有遇到过 $route 和 $router?乍一看,两个看起来几乎一模一样,有点傻傻分不清楚,他们到底有什么区别?在什么情况下用呢? 我们把这2个在控制台打印出 ...
Vue路由传参及传参后刷新导致参数消失处理
参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第 ...

view路由传参方法

view路由传参方法相关推荐

最新文章

热门文章