利用vue-router实现二级菜单内容转换
2016-11-30 16:45
1511 查看
二级菜单导航是一种很普遍的功能,一般网页都会有这个功能。如果是平常的做法就是改变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>
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 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前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 利用vue-router实现二级菜单内容转换
- 用vue-router实现二级菜单内容的转换
- vue+vue-router+vuex,利用vue-router2.2.0新增特性addRoutes实现路由动态加载,菜单动态加载,运用于后台管理系统,路由数据取自数据库
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- js实现二级菜单点击显示当前内容效果
- 用ajax技术读取数据库内容实现二级联动下拉选择菜单
- vue-router动态利用配置内容
- 利用vue+vue-router+elementUI实现简易通讯录
- ExpandableListView 动态加载 点击一级菜单时再加载二级菜单的内容实现
- 利用JS实现一个简单的二级联动菜单
- ASP.NET利用JavaScript实现无刷新闪烁二级联动菜单
- CSS--利用CSS实现一个简易的二级菜单(仿京东)
- vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
- 利用vue-router的动态路由和路由传值实现同一模板渲染不同数据
- vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
- java利用过滤器实现编码的转换,内容输出的替换
- Vue.js实战之利用vue-router实现跳转页面