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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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 smarty模版引擎中的缓存应用
2009/12/11 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jquery text()要注意啦
2009/10/30 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
详解Python核心对象类型字符串
2018/02/11 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
python接口自动化框架实战
2020/12/23 Python
项目合作计划书
2014/01/09 职场文书
八年级美术教学反思
2014/02/02 职场文书
如何写好自荐信
2014/04/07 职场文书
养牛场项目建议书
2014/05/13 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
小学生作文评语集锦
2014/12/25 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书