vue router 组件的高级应用实例代码


Posted in Javascript onApril 08, 2019

1 动态设置页面标题

页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的。必须通过 JavaScript 来修改 <title></title> 中的内容:

window.document.title ='xxx'

有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title> 中的内容。这种方式固然可行,但如果页面很多,就会显著增加维护成本,而且修改逻辑都是一样的。有没有更好的方法呢?

我们可以利用 vue-router 组件的导航钩子 beforeEach 函数,在路由发生变化时,统一设置。

import VueRouter from 'vue-router';
...

//加载 vue-router 插件
Vue.use(VueRouter);

/*定义路由匹配表*/
const Routers = [{
 path: '/index',
 component: (resolve) => require(['./router/views/index.vue'], resolve),
 meta: {
  title: '首页'
 }
},
 //一次性加载
 // {
 //  path: '/index',
 //  component: require('./router/views/index.vue')
 // },
 {
  path: '/about',
  component: (resolve) => require(['./router/views/about.vue'], resolve),
  meta: {
   title: '关于'
  }
 },
 {
  path: '/article/:id',
  component: (resolve) => require(['./router/views/article.vue'], resolve)
 }
 ,
 {//当访问的页面不存在时,重定向到首页
  path: '*',
  redirect: '/index'
 }
]
//路由配置
const RouterConfig = {
 //使用 HTML5 的 History 路由模式
 mode: 'history',
 routes: Routers
};
//路由实例
const router = new VueRouter(RouterConfig);
//动态设置页面标题
router.beforeEach((to, from, next) => {
 window.document.title = to.meta.title;
 next();
})
new Vue({
 el: '#app',
 router: router,
 render: h => h(Hello)
})

我们在路由匹配表中,为那些需要标题的页面,配置了 meta title 属性:

meta: {
  title: 'xxx'
}

然后在 beforeEach 导航钩子函数中,从路由对象中获取 meta title 属性,用于标题设置。beforeEach 有三个入参:

参数 说明

参数 说明
to 当前导航,即将要进入的路由对象。
from 当前导航,即将要离开的路由对象。
next 调用 next() 之后,才会进入下一步。

效果:

vue router 组件的高级应用实例代码

2 长页面跳转自动返回顶端

假设第一个页面较长,用户滚动查看到底部,这时如果又跳转到另一个页面,那么滚动条是会默认停在上一个页面的所在位置的。这种场景比较好的设计是:跳转后会自动返回顶端。这可以通过 afterEach 钩子函数来实现,代码如下:

router.afterEach((to, from, next) => {
 window.scrollTo(0, 0);
});

组合使用 beforeEach 与 afterEach,还可以实现:从一个页面跳转到另一个页面时,出现 Loading 动画,当新页面加载后,再结束动画。

3 登陆验证

某些页面设置了权限,只有账号登陆过,才能访问;否则跳转到登录页。假设我们使用 localStorage 来判断是否登陆。

HTML5 的 localStorage 特性,用于本地存储。它的出现,解决了 cookie 存储空间不足的问题 cookie 中每条 cookie 的存储空间只有 4k) ,而 localStorage 中一般是 5M,这在不同的浏览器中 大小略有不同 。

router.beforeEach((to, from, next) => {
 if (window.localStorage.getItem('token')) {
  next();
 } else {
  next('/login');
 }
});

next() 入参,如果是 false,会不导航;如果为路径,则会导航到指定路径下的页面。

总结

以上所述是小编给大家介绍的vue router 组件的高级应用实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
Javascript玩转继承(二)
May 08 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 #Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 #Javascript
JavaScript数组去重的几种方法
Apr 07 #Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 #Javascript
js中Generator函数的深入讲解
Apr 07 #Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 #Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 #Javascript
You might like
漂亮但不安全的CTB
2006/10/09 PHP
杏林同学录(二)
2006/10/09 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
tagName的使用,留一笔
2006/06/26 Javascript
用jscript启动sqlserver
2007/06/21 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vue组件与复用详解
2018/04/08 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
详解基于django实现的webssh简单例子
2018/07/17 Python
python获取地震信息 微信实时推送
2019/06/18 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
煤矿机修工岗位职责
2014/02/07 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
趣味运动会赞词
2015/07/22 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
《三国志》赏析
2019/08/27 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
python 实现图片特效处理
2022/04/03 Python