场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据

因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实现的

<router-link :to="{name:'blogDetailsLink'} ></router-link >

如果你也是这种情况,那你就可以继续往下看了

1.在home.vue中代码实现携带参数

<li v-for="item in laber_cloud" >
<router-link :to="{name:'blogDetailsLink',params:{id:item.id}}" >{{item.name}}</router-link>
</li>

2.路由:

{ path: '/home/blogDetails', name: 'blogDetailsLink', component: BlogDetails }, 

3.blogDetails.vue中获取参数

// 在html中获取
{{$route.params.id}} // 在js中获取
this.$route.params.id

这样就实现在循环中给url携带参数,但是这样有一个问题,就是url相同,参数不同,点击之后没有效果

如果你出现这种 路由相同参数不同不能跳转的问题,那么你可以点我查看详情

每天一点点之vue框架开发 - vue-router路由在循环中携带参数的更多相关文章

  1. 每天一点点之vue框架开发 - 使用vue-router路由

    1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...

  2. 每天一点点之vue框架开发 - vue坑-This relative module was not found

    94% asset optimization ERROR Failed to compile with 1 errors This relative module was not found: * . ...

  3. 每天一点点之vue框架开发 - vue坑-input 的checked渲染问题

    选中radio或者checkbox需要注意的是: 不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中 ...

  4. 每天一点点之vue框架开发 - vue组件之间传值(父向子传值)

    路由文件 { path: '/productListBase', name: 'productListLink', component: ProductListBase, redirect: '/pr ...

  5. 每天一点点之vue框架开发 - vue 动态替换路由(地址栏)参数

    import merge from 'webpack-merge': // 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'max ...

  6. 每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

    1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document. ...

  7. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  8. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  9. 每天一点点之 taro 框架开发 - 事件处理与样式表

    1.方法调用 state = { name:'张三' } test(){ this.state.name } <button onClick={ this.test.bind(this) } / ...

随机推荐

  1. ROS学习笔记1-引言

    该学习笔记参考ROS官方wiki的内容,见:http://wiki.ros.org/ROS/Introduction 什么是ROSROS的全称是Robot Operating System,即机器人操 ...

  2. SQL语言的四种类型

    SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHE ...

  3. java中,小数为0,保留整数,不为0,保留小数

  4. Python入门知识总结【新手必学】

    Python 基础学习输入和输出list 和 tuple条件判断循环dict 和 set感觉python这门语言用途较广,先熟悉下其语法.PS:另外很多人在学习Python的过程中,往往因为没有好的教 ...

  5. 公用表表达式(CTE) with as 片段

    1.为什么用CTE,而不用表变量, declare @t table(CountryRegionCode nvarchar(3)) insert into @t(CountryRegionCode)  ...

  6. Vue中复制文本 vue-clipboard2

    附上代码,方便复制粘贴 //复制文本 onCopy(meetingId) { let _this = this; getMeetingDetail(meetingId).then(res => ...

  7. 吴裕雄--天生自然JAVA面向对象高级编程学习笔记:抽象类与接口的应用

    abstract class A{ // 定义抽象类A public abstract void print() ; // 定义抽象方法print() }; class B extends A { / ...

  8. 如何解决 Django 前后端分离开发的跨域问题

    一.同源策略 1.先来说说什么是源 • 源(origin)就是协议.域名和端口号. 以上url中的源就是:http://www.company.com:80 若地址里面的协议.域名和端口号均相同则属于 ...

  9. 管理和安装 chart【转】

    安装 chart 当我们觉得准备就绪,就可以安装 chart,Helm 支持四种安装方法: 安装仓库中的 chart,例如:helm install stable/nginx 通过 tar 包安装,例 ...

  10. 【pwnable.tw】 seethefile

    一开始特别懵的一道题. main函数中一共4个功能,openfile.readfile.writefile.closefile. 其中,在最后退出时有一个明显的溢出,是scanf("%s&q ...