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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
详解webpack babel的配置
Jan 09 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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中stdClass的用法分析
2015/02/27 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
EL表达式截取字符串的函数说明
2017/09/22 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
理解Python中函数的参数
2015/04/27 Python
利用python模拟实现POST请求提交图片的方法
2017/07/25 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
django主动抛出403异常的方法详解
2019/01/04 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
一道Delphi上机题
2012/06/04 面试题
班班通项目实施方案
2014/02/25 职场文书
个人函授自我鉴定
2014/03/25 职场文书
公司保密承诺书
2014/03/27 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
入股协议书范本
2014/11/01 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书