业务场景：使用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上添加的事件都会失效。