vue路由 遍历生成复数router-link的例子


Posted in Javascript onOctober 30, 2019

业务场景:使用vue-cli做一个spa;

需求:顶部导航栏控制下方内容栏,实现页面内切换。

毫无疑问,vue-router很适合这样的需求,实现起来也并不复杂:

1、main.js:

import VueRouter from 'vue-router'
Vue.use(VueRouter);

2、定义(路由)组件:

import songList from './components/songList.vue'
 
const Bar = { template: '<div>no.2</div>' }
const Baz = { template: '<div>no.3</div>' }
const Fun = { template: '<div>no.4</div>' }

这里的组件也可以从外部导入,说起来应该是正确的做法,博主为了演示方便才直接写在里面了...

3、定义路由:

const routes = [
 { path: '/新歌',
 component: songList
 },
 { path: '/排行',
 component: Bar
 },
 { path: '/榜单',
 component: Baz
 },
 { path: '/歌手',
 component: Fun
 },
 { path: '*',
 redirect: '/新歌'
 }
]

注意,最后设置了一个重定向路由,目的是当路径不属于以上任意一个时,匹配到‘新歌'页面;说白了也就是设置初始页的路由。

4、创建router实例:

const router = new VueRouter({
 routes//等价routes: routes
})

5、创建和挂载根实例:

new Vue({
 router,
 el: '#app',
 render: h => h(App)
})

navBar.vue:

在组件页面上,按照常理应该分别写出具体数目的导航标签,类似下面这样:

<router-link to="/新歌">新歌</router-link>
<router-link to="/排行">排行</router-link>
<router-link to="/榜单">榜单</router-link>
<router-link to="/歌手">歌手</router-link>

但实际运用上有个小问题,就是像这样重复样式的路由入口真的有必要每个都写一遍么?唯一的区别仅仅是to属性不同?

万一今后碰到十几、二十个怎么办?

于是换个思路,尝试遍历数组来生成复数个路由入口:

<span v-for="(bar, index) in title" :key="index">
 <router-link to="">
 {{ bar }}
 </router-link>
</span>

大致如上,title是一个所有名目的数组:[ 新歌,排行,榜单,歌手,... ],Index索引用来绑定key值。现在唯一的问题 就是to也就是路由入口路径该怎么写?

由于每个都会渲染成不同出口,所以不能写成绝对路径。

方案一:将main.js中的路径都变成title中的名称,再在to中用拼接字符串实现动态匹配。

实际操作下来发现并不可取,因为在html中只会识别to=“”中双引号内的内容,更不能使用‘+'这类js才能识别的拼接符号。

方案二:使用编程式导航,

methods: {
 linkChange: function (bar) {
  this.$router.push({ path: '/'+bar});
 }
 }

<span v-for="(bar, index) in title" :key="index">
 <router-link to="" @click.native="linkChange(bar)">
 {{ bar }}
 </router-link>
</span>

这种方法将路径写在methods中就可以使用每次遍历数组获得的值,从而实现动态匹配。

为什么要给click事件加上native后缀?

这里是个很典型的router-link的小坑,因为浏览器会把router-link渲染成a标签,那么在router-link上添加的事件都会失效。

解决方案就是加上.native后缀来阻止原生事件。

但这种方式也有个很严重的BUG,即在遍历中使用编程式导航,会导致所有入口响应这个点击事件!

具体说来就是当用户点击某个路由,所有的入口都会被vue识别为选中路由,页面逻辑可能看不出来,

但只要加个.router-link-active { background: #f4f4f4 }这种vue给当前路由默认添加的class设置一个背景色,就能发现所有路由入口元素

一起变色!

这个bug在不使用遍历,依次给span设置路由的时候不会出现,具体原因希望有大神可以告知。

所以此方案也只能放弃。

方案三:

在html中绑定to属性,

<span v-for="(bar, index) in title" :key="index">
 <router-link :to="{ path: '/'+bar }">
 {{ bar }}
 </router-link>
</span>

想了太多复杂的方案,反而忽略了最基本的绑定to属性,

最方便的地方在于,大括号内既可以像我一样写完整路径,也可以直接写成:to="{ path: bar }",效果是一样的。

而且相比前面的方法,可以省去额外的点击事件,利用其本身的路径特性来完成。

到目前为止,需求可以算是基本完成,但细节还能不能更完美一点呢?

就拿这个例子来说,我们用span标签包裹了渲染成a标签的router-link,有时候我们想要选中的标签字体变成蓝色,同时span下面出现蓝色边框,

提高用户体验。那么使用.router-link-active改变a标签颜色是最方便的了,问题是上一级的span该如何添加样式呢?

似乎不添加额外class或id这种标识是无法实现功能的,但我在vue官网上看到这么一句话:“有时候我们要让 "激活时的CSS类名" 应用在外层元素,而不是 <a> 标签本身,那么可以用 <router-link> 渲染外层元素,包裹着内层的原生 <a> 标签”。

代码如下:

<router-link tag="span" :to="{ path: bar }" v-for="(bar, index) in title" :key="index">
  <a>
  {{ bar }}
  </a>
 </router-link>

使用tag标签改变其渲染元素,包裹a标签。如此一来,.router-link-active添加span底边框,.router-link-active a 来改变字体颜色。

不需要使用额外标记也能完成样式需求。

以上这篇vue路由 遍历生成复数router-link的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
JsRender for object语法简介
Oct 31 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 #Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 #Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 #Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 #Javascript
vue cli3 配置proxy代理无效的解决
Oct 30 #Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 #Javascript
vue - vue.config.js中devServer配置方式
Oct 30 #Javascript
You might like
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
JQuery中$之选择器用法介绍
2011/04/05 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
Python with的用法
2014/08/22 Python
python决策树之C4.5算法详解
2017/12/20 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
外包公司软件测试工程师
2014/11/01 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
建筑毕业生自我鉴定
2013/10/18 职场文书
奠基仪式主持词
2014/03/20 职场文书
企业承诺书格式
2014/05/21 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技
HttpClient实现表单提交上传文件
2022/08/14 Java/Android