利用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 相关文章推荐
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 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代码审计比较有意思的例子
2014/05/07 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
php实现登陆模块功能示例
2016/10/20 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
javascript验证身份证号
2015/03/03 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Python3搜索及替换文件中文本的方法
2015/05/22 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Python打印不合法的文件名
2020/07/31 Python
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
策划创业计划书
2014/02/06 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Tomcat弱口令复现及利用
2022/05/06 Servers