方案一：将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> 标签”。
