利用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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
js获取滚动距离的方法
May 30 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
js 函数性能比较方法
Aug 24 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python验证码识别的方法
2015/07/10 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python实现手势识别
2020/10/21 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
公司成本主管岗位责任制
2014/02/21 职场文书
社会实践活动总结报告
2014/04/29 职场文书
比赛口号大全
2014/06/10 职场文书
新生入学欢迎词
2015/01/26 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书