深入理解Vue router的部分高级用法
(编辑：jimmy 日期: 2025/3/18 浏览：3 次 )
今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法。
1.路由元信息
什么是路由元信息，看看官网的解释，定义路由的时候可以配置 meta 字段可以匹配meta字段，那么我们该如何使用它，一个简单的例子，改变浏览器title的值。下面上代码。
//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
mode: 'history',
routes: [
{path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
{path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
]
})
//可以在跳转之前判断跳转的组件的名字并用window.document.title赋值
Router.beforeEach((to,from,next) => {
window.document.title=to.meta.title
})
上面的是不是看上去很简单呢，但是它并不简单，我只是举了一个比较小的例子罢了。还要看大家怎么活学活用这样才好，但是我强调几点需要注意的
第一点就是这个beforeEach页面跳转之前调用，好处是比如想要改变title的值不会显得太突兀，可以直接替换。
第二点afterEach这个不用我说了吧这个是在组件跳转之后调用比较适用于返回页面之前浏览过的区域或者是让页面返回顶部的操作。
2.滚动行为
想必各位同学应该知道我要讲些什么了没错就是页面的前进和后退时的滚动事件，怎么实现呢，有两种实现方式，先看代码。
//刚才我说过的方法直接使用afterEach方法去实现组件的scrollTo归零
Router.afterEach((to,from,next) => {
window.scrollTo(0,0)
})
下面是真正的回滚事件可以看看
//简单的我就不写了直接上解决方案
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../login/Login'
import Home from '../pages/Home'
export default new Router({
mode: 'history',
routes: [
{path: 'home', name: 'Home', component: Home,meta:{title:"主页"}}
{path: 'login', name: 'Login', component: Login,meta:{title:"登录"}}
]，
//有两种小的方式进行回滚
//{ x: number, y: number }
//{ selector: string, offset"htmlcode">
//代码很简单看看就知道了，下面只贴部分代码
{path:'homepages',name:'Homepages',component:homepages,resolve}
没错只要使用resolve就能实现按需加载的要求，是不是很简单，但是resolve还有很多其他使用方式建议去官网看看。另外诸如go(),history等方法的使用还是去官网上看看自己写出来理解会更快。
总结
以上所述是小编给大家介绍的Vue router的部分高级用法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
下一篇：JS打印彩色菱形的实例代码