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 相关文章推荐
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
JavaScript实现左右滚动电影画布
Feb 06 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
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python常用函数详解
2016/09/13 Python
python global关键字的用法详解
2019/09/05 Python
python定义类self用法实例解析
2020/01/22 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
委托代理人授权委托书范本
2014/09/24 职场文书
项目战略合作意向书
2015/05/08 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
python实现MD5进行文件去重的示例代码
2021/07/09 Python