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


Posted in Javascript onNovember 30, 2016

二级菜单导航是一种很普遍的功能,一般网页都会有这个功能。如果是平常的做法就是改变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的参数去一个方法拿到数据,这里就要createdwatch '$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前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
javascript一些实用技巧小结
Mar 18 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
Nov 30 #Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 #Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 #Javascript
微信小程序之小豆瓣图书实例
Nov 30 #Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 #Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 #Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 #Javascript
You might like
php 把数字转换成汉字的代码
2015/07/21 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
JDO的含义
2012/11/17 面试题
麦当劳辞职信范文
2014/01/18 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
医德医风个人总结
2015/02/28 职场文书
求职简历自我评价2015
2015/03/10 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
钢琴师观后感
2015/06/12 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
js 实现验证码输入框示例详解
2022/09/23 Javascript