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

2023-08-10 03:27:06 222

业务场景：使用vue-cli做一个spa；

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

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

1、main.js：

importVueRouterfrom'vue-router'
Vue.use(VueRouter);

2、定义（路由）组件：

importsongListfrom'./components/songList.vue'

constBar={template:'no.2'}
constBaz={template:'no.3'}
constFun={template:'no.4
'}

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

3、定义路由：

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

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

4、创建router实例：

constrouter=newVueRouter({
routes//等价routes:routes
})

5、创建和挂载根实例：

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

navBar.vue：

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

新歌
排行
榜单
歌手

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

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

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



{{bar}}

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

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

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

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

方案二：使用编程式导航，

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



{{bar}}

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

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

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

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

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

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

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

一起变色！

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

所以此方案也只能放弃。

方案三：

在html中绑定to属性，



{{bar}}

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

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

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

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

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

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

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

代码如下：



{{bar}}

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

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐

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