二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。
如果用vue的话，可以用vue-router改变<router-view>里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了<router-view>里面的组件，渲染了新的组件。
在线demo：
html
使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。
<div>
<div>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<ul>
<li><router-link to="https://www.jb51.net/" actived>首页</router-link></li>
<li><router-link to="/article">文章</router-link></li>
<li><router-link to="/picture">图片</router-link></li>
<li><router-link to="/music">音乐</router-link></li>
</ul>
</div>
<div>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</div>
js
定义路由。每个路由应该映射一个组件。 其中”component” 可以是组件等。 创建和挂载根实例。记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
var Home = {template: '<div>home</div>'} var router = new VueRouter({ routes: [ {path: 'https://www.jb51.net/', component: Home}, {path: '/picture', component: Picture}, {path: '/music', component: Music}, {path: '/article', component: Artlist}, {path: '/article/:id', component: Article} ] }) new Vue({ el: "#app", router: router })
切换到了文章部分时，我又弄了个文章列表，点击文章标题才进入文章内容。
这里我写死了数据，实际可以通过ajax拿到数据赋值。
我模拟了loading…，根据数据驱动的思维，通过v-if="loading"来判断这个loading是否出现。
动画切换记得要指定不同的key，不然是没有效果的。
创建和改变路由的时候，都要通过传递url的参数去一个方法拿到数据，这里就要created和watch '$route'
拿url参数是通过$route.params或$route.query等，具体看教程
返回上一级是用router.go(-1)，相当于按退回按钮
var Article = { template: '<div>\ <div v-if="loading">loading.....</div>\ <transition>\ <div v-if="post" :key="post.id">\ <button @click="back">返回</button>\ <p>{{post.title}}</p>\ <P>{{post.body}}</P>\ </div>\ </transition>\ </div>', data: function() { return { loading: false, error: null, post: null } }, created:function() { this.fetchData(); }, watch: { '$route': 'fetchData' }, methods: { fetchData:function () { this.error = this.post = null; this.loading = true; getPost(this.$route.params.id,(err,post) => { this.loading = false; if(err) { this.error = err.toString(); }else { this.post = post } }) }, back: function() { router.go(-1); } } }