1动态设置页面标题

页面标题由标题控制。因为SPA只有一个HTML，切换到不同页面时标题不会改变。标题/标题中的内容必须通过JavaScript修改：

window.document.title='xxx '

一种想法是在*的挂载钩子函数中通过JavaScript修改标题/title中的内容。每页的vue。这种方法是可行的，但如果页面较多，会明显增加维护成本，修改逻辑也是一样的。有没有更好的办法？

我们可以使用vue-router组件的每个功能之前的导航钩子，在路由改变时统一设置。

从“vue-router”导入VueRouter.//加载vue-路由器插件vue . use(VueRouter)；/*定义路由匹配表*/const routers=[{ path : '/index '，component 3360(resolve)=require([)。/router/view/index . vue ']，resolve)，Meta : { title : ' home page ' }，//一旦加载//{//path:'/index '，//component: require ' ./router/view/index . vue ')/}，{ path : '/ABO component :(resolve)=require([)。/router/view/about . vue ']，resolve)，meta3360 {title :' about'}，{path3360'/article/: id '，component :(resolve)=require([)。/router/view/article . vue ']，resolve)}，{//当访问的页面不存在时，重定向到第一页path: '* '。Redirect: '/index' }]//路由配置const RouterConfig={//使用HTML5 History路由模式模式：' history '，路由3360路由}；//路由实例constrouter=newvue路由器(router config)；//动态设置页面标题router.beforeeach ((to，from，next)={ window . document . title=to . meta . title；next()；}) newvue ({el:' # app '，router: router，render:h=h (hello)})我们为路由匹配表中需要标题的页面配置了元标题属性：

Meta: {title: 'xxx'}然后在beforeEach导航钩子函数中，从路由对象中获取标题设置的meta title属性。每个BeforeEach有三个参数：

参数描述

参数指示当前导航，即要输入的路线对象。从当前导航，即将离开的路由对象。在next调用next()之后，它将进入下一步。效果：

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

假设第一页很长，用户滚动到底部，如果他跳到另一页，滚动条默认会停在上一页的位置。这个场景更好的设计是跳跃后会自动回到顶部。这可以通过afterEach钩子函数来实现，代码如下：

router.afterEach((to，from，next)={ window.scrollTo(0，0)；});结合使用beforeEach和afterEach，还可以实现从一个页面跳转到另一个页面时，出现Loading动画，加载新页面时，动画结束。

3登录验证

部分页面设置了权限，只有账号已经登录才能访问；否则跳转到登录页面。假设我们使用本地存储来决定是否登录。

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

router.beforeEach((to，from，next)={ if(window . local storage . getitem(' token ')){ next()；} else { next('/log in ')；}});输入next()，如果为false，则不导航；如果是路径，它将导航到指定路径下的页面。

摘要

以上是边肖介绍的vue路由器组件的高级应用示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！