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');
    	}
    })	
    

      

  • 相关阅读:
    Matlab之rand(), randn(), randi()函数的使用方法
    matlab给图片插入说明文字
    matlab之find()函数
    excel根据数据源变化的动态图表
    高斯坐标
    (转)Mysql技术内幕InnoDB存储引擎-表&索引算法和锁
    (转)MySQL 插入数据时,中文乱码问题的解决
    (转)防止人为误操作MySQL数据库技巧一例
    (转)mysql explain详解
    (转)一个MySQL 5.7 分区表性能下降的案例分析
  • 原文地址:https://www.cnblogs.com/zhaoliu100125/p/10259229.html
Copyright © 2011-2022 走看看