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

      

  • 相关阅读:
    一个贼基础的 编码解码方式
    SQL 中循环、for循环、游标
    sql中判断是否存在 数据库、表、存储过程、函数
    sql 同步表或同步表的时候更改部分字段
    sql存储过程的建立
    POJ
    UCloud 的安全秘钥 (计蒜客初赛第五场)(待解决)
    UCloud 机房的网络搭建(计蒜客初赛第五场)
    2017 计蒜之道 初赛 第四场
    腾讯课堂的物理实验(2017计蒜客初赛第三场)
  • 原文地址:https://www.cnblogs.com/zhaoliu100125/p/10259229.html
Copyright © 2011-2022 走看看