利用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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
有趣的JavaScript数组长度问题代码说明
Jan 20 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 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中的三元运算符使用说明
2011/07/03 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue的for循环使用方法
2019/02/12 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
高三地理教学反思
2014/01/11 职场文书
认识深刻的检讨书
2014/02/16 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
初三化学教学反思
2016/02/22 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python