vue路由遍历生成复数router-link的方法是什么
这篇文章主要讲解了“vue路由遍历生成复数router-link的方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue路由遍历生成复数router-link的方法是什么”吧!
需求:顶部导航栏控制下方内容栏,实现页面内切换。
毫无疑问,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
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
感谢各位的阅读,以上就是“vue路由遍历生成复数router-link的方法是什么”的内容了,经过本文的学习后,相信大家对vue路由遍历生成复数router-link的方法是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341