二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。

如果用vue的话，可以用vue-router改变<router-view>里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了<router-view>里面的组件，渲染了新的组件。

在线demo：http://runjs.cn/code/9th3cgxo

html

使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

<div id="app"> <div> <> <> <> <ul> <li><router-link to="/" 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: '/', 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 name="slide"> <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); } } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。

【利用vue-router实现二级菜单内容转换】相关文章：

★ 如何实现浏览器上的右键菜单

★ JS实现简单路由器功能的方法

★ 基于JavaScript实现智能右键菜单

★ javascript实现简单的进度条

★ JavaScript实现简单的数字倒计时

★ javascript实现控制的多级下拉菜单

★ jQuery插件bgStretcher.js实现全屏背景特效

★ 在JavaScript应用中使用RequireJS来实现延迟加载

★ js实现顶部可折叠的菜单工具栏效果实例

★ jQuery Timelinr实现垂直水平时间轴插件(附源码下载)