利用vue-router实现二级菜单内容转换

(编辑：jimmy 日期: 2024/11/18 浏览：3 次 )

二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变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 class="leftBox">
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <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 class="rightBox">
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
 </div>
</div>

定义路由。每个路由应该映射一个组件。其中”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 class="post"> <div class="loading" v-if="loading">loading.....</div> <transition name="slide"> <div v-if="post" class="content" :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.js前端组件学习教程》，欢迎大家学习阅读。

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

上一篇：深入理解jQuery.data() 的实现方式
下一篇：JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)