zoukankan      html  css  js  c++  java
  • vue-router高级用法

    先抛出一个问题,在SPA项目中如何修改网页标题?
    网页标题是通过<title></title>来显示的,但是SPA只有一个固定的HTML,切换到不同页面时,标题并不会变化,但是可以通过JavaScript修改.
      window.document.title = '要修改的标题'
      那么问题来了,在VUE工程里,在哪里,什么时候修改呢?比较理想的一个方法是,在路由页面发生改变时,统一配置.vue-router提供了导航钩子beforeEach和afterEach,它们会在路由即将改变和改变后触发,所以设置标题可以在beforeEach中完成.

    // main.js
    const Routers = [
    	{
    		path:'/index',
    		meta:{
    			title:'首页'
    		},
    		component:(resolve)=>require(['../view/index.vue'],resolve)
    	},
    	{
    		path:'/about',
    		meta:{
    			title:'介绍页面'
    		},
    		component:(resolve)=>require(['../view/about.vue'],resolve)
    	}
    ]
    const router = new VueRouter(RouterConfig);
    router.beforeEach((to,from,next)=>{
    	window.document.title = to.meta.title;
    	next();
    })
    

      

    导航钩子有3个参数
    ·to 即将进入的目标的路由对象
    ·from 当前导航即将要离开的路由对象
    ·next 调用该方法后才能进入下一个钩子

      有了这两个钩子,还可以做很多事情来提升用户体验。比如一个比较长的页面,滚动到某个位置,在跳转到另一个页面,页面滚动条默认实在上一个页面停留的位置,而好的体验肯定是返回顶端。通过钩子afterEach就可以实现。

    //main.js
    router.afterEach((to,form,next)=>{
        window.scrollTop(0,0);
    }
    

      next() 方法可以设置参数,例如如下场景:

      某些页面需要判断是否登录,如果登录了可以访问,否则跳转到登录页面。这里我们通过 localStorage来简易判断:

    route.afterEach((to,form,next)=>{
    	if(window.localStorage.getItem('token')){
    		next();
    	}else{
    		next('/login');
    	}
    })	
    

      

  • 相关阅读:
    第一章 经济基础知识
    105_实例
    SQL开窗函数
    Docker教程:Docker入门实践
    102_HDFS分布式文件系统
    [转]远程连接出现身份验证错误,要求的函数不受支持
    flutter创建工程指定iOS及Android开发语言
    架构师学习之路:康威定律
    智能识别客户收货地址信息
    深入理解Apache Dubbo与实战 pdf
  • 原文地址:https://www.cnblogs.com/zhaoliu100125/p/10259229.html
Copyright © 2011-2022 走看看