vue --- 使用vue-router获取带参数的路由
希望的效果如下:
- 2个路由: 点击如下
步骤.
- 使用 router-link 来指定路由路径
- 在router.js中指定 路径的 事件处理函数(对应的组件)
- 创建对应的组件
router-link
- 找到一个区别各个列表的属性(id),将其作为参数传递到路由中
- to是vue-router中用来绑定路由的属性
- 由于需要进行计算(path + id),故需要将to改为 :to
// NewsList.vue
<router-link :to=" '/home/newsinfo/' + item.id "><img class="mui-media-object mui-pull-left" :src="item.img_url"><div class="mui-media-body"><h1> {{ item.title }} </h1><p class="mui-ellipsis"><span>发表时间: {{ item.add_time | dateFormat }} </span><span>点击: {{ item.check }} 次</span></p></div>
</router-link>
路由对应组件
- 使用 :id 来获取 “http://localhost:5500/#/home/newsinfo/13” 中的最后一个参数,属性名为 id
- 使用 :id 绑定后,即可在 $route的params中获取 id 属性了.
// router
// 导入 vue-router
import VueRouter from 'vue-router'
// 导入相应的组件
import NewsInfo from './lib/components/news/NewsInfo.vue'var router = new VueRouter({routes:[{ path: '/', redirect: '/home' }, // 重定向{ path: '/home/newsinfo/:id', component: NewsInfo }],linkActiveClass:'mui-active' // 路由激活时的样式
})
创建组件(NewsInfo.vue)
- url信息绑定在Vue实例的 $route上
- created:是Vue生命周期中最早可以使用data和方法的函数
- 可以通过打印 this.$route 将路由信息输出到控制台
- 可以看见,传递的id信息在 this.$route.params.id 上
- 在tempate中会默认指向this, 因此 在里面使用时需要去掉this.而直接使用 {{ $route.params.id }}
// NewsInfo.vue
<template><div><h3>新闻详情 --- {{ $route.params.id }} </h3></div>
</template>
<script>
export default{data() {return {}},
}
</script>
<style lang="scss" scoped>
</style>
vue --- 使用vue-router获取带参数的路由相关推荐
- nuxt 带参数动态路由
nuxt是基于vue.js服务端渲染的框架,其中路由文件不像vue项目那样手动配置,而是依据 pages 目录结构自动生成 vue-router 模块的路由 配置. 基于项目seo优化需求,需要将路由 ...
- ant design pro之带参数的路由
脚手架默认支持带参数的路由,但是在菜单中显示带参数的路由需要在代码中自行处理 {path: '/dashboard/:page',hideInMenu:true,name: 'analysis',co ...
- vue window.open跳转带参数
在需要跳转的页面里面写方法,点击该方法就执行 let routeData = this.$router.resolve({ path: '/qrCode', query: { data: JSON.s ...
- thinkphp5 获取带参数公众号二维码 以及如何接收二维码参数 微信公众号开发(一)
// 获取公众号带参数二维码 public function getqrcodeticket($value='') { // @header('Content-type ...
- angular获取路由参数_Angular应用带参数的路由实现
先看需求:在dashboard页面,点击任何一个hero之后, 期望跳转到明细页面:同时浏览器地址栏也对应发生变化. 下面是具体实现步骤. (1) app module:其中应用逻辑包含在NgModu ...
- Angular应用带参数的路由实现
先看需求:在dashboard页面,点击任何一个hero之后, 期望跳转到明细页面:同时浏览器地址栏也对应发生变化. 下面是具体实现步骤. (1) app module:其中应用逻辑包含在NgModu ...
- vue 返回上一页 带参数
返回上一页用的是 this.$router.go(-1) 那么只能在返回之前将参数放在localStorage里面 localStorage.setItem('searchKeyword', this ...
- beanutils获取带参数get方法
public Employee getEmployee(int index) { return new Employee(); } 1.PropertyUtils.getInd ...
- 小程序 获取带参数太阳码的参数,并解析出来(wxacode.getUnlimited)
首先,我这边使用的是小程序的第二种场景码,前提是你这个小程序必须是已经发布的 点击跳转查看详细官方文档:获取小程序 这个码需要后台配置生成好太阳码然后返回给前端. 假设:你传给后台的page为:&qu ...
最新文章
- html文档使用,使用提供 HTML 文档的过程
- 有了“手掌”,机械手也能盘“核桃”,耶鲁出品 | Science子刊
- JQuery.validate中文API
- html overflow 样式,css样式之overflow-x属性样式
- Linux工作笔记024---Centos7 下查看本机公网IP
- Section 1.3 milk
- idea debug异常关闭 Error running 'Tomcat8': Unable to open debugger port (127.0.0.1:50168): java.net.Soc
- 进军生物计算!百度发布飞桨螺旋桨PaddleHelix
- Matlab:风向玫瑰图,我也行
- 小米笔记本解决风扇异响
- DIY无人机组装与飞控参数调试记录(DJI NAZA-LITE)
- Mybatis 特殊符号(大于,小于,不等于)及常用函数总结
- 【vue3】ref获取v-for循环渲染的元素
- MPB:农科院牧医所赵圣国组-微生物DNA、RNA和蛋白质共提取方法
- 如何使用Screenflick在Mac上创建延时屏幕录像?
- steamvr2.0 vr模式下,多相机共存
- python对真假的判断方式
- 黑*头条_第8章_爬虫系统搭建
- 利用Github Actions部署自动更新PaddleOCR指定代码到指定仓库
- git push 卡住不动的解决
热门文章
- Unity SRP自定义渲染管线 -- 2.Custom Shaders
- Xcode and Unity missing library ‘lGoogleUtilities‘
- 不同matlab版本所支持的gcc g+版本
- 【JavaWeb】石家庄地铁搭乘系统——第一版(功能尚未完善)
- day 3 list列表生成式
- 【9018:1956】线段树1
- 新手上路之Hibernate:第一个Hibernate例子
- Tableview中Dynamic Prototypes动态表的使用
- 23种设计模式----------代理模式(一)
- [置顶] 程序员编程生产力相差10倍意味着什么?