面试总结 vue-router

路由模式hash和history

hash带#；history没有
hash的兼容性比history的兼容性好
hash用hashchange事件监听URL中路由的变化；history用popstate事件监听URL变化
hash不需要服务端进行设置；history需要后端支持

标题路由懒加载

网页默认一打开就加载所有页面，使用路由懒加载把把不同路由对应的组件分割成不同的代码块，访问时再加载对应组件。
路由懒加载也叫按需加载

{path:'home',component:()=>import('@views/home.vue')}

路由守卫

是什么：路由跳转的验证
有哪些钩子函数：
全局前置守卫 beforeEach(判断用户是否已登录)
全局后置钩子 afterEach
路由独享守卫 beforeEnter
组件内的守卫：
beforeRouteEnter(进入前)；
beforeRouteUpdate(路由变化时)；
beforeRouteLeave(离开路由之前执行的函数)!!!

Vue路由传参的方式

query
传值 => this.$router.push({path:'/home',query:{id:123});
接收 => this.$route.query.id
显式的，参数显示在URL上
刷新页面数据不会消失
params
传值=》this.$router.push({name:'Home',params:{id:123});
接收=》this.$route.params.id
隐式的参数没有显示在URL上
刷新页面数据会消失

动态路由

场景：详情页

// 如何配置
// router.js
{
	path:'/list/:id',
	component:()=>import('../list')
}
// router跳转
this.router.push({path:'/list/'+id})
// 接收route
console.log(this.$route.params) // id: "123"

route和router

route是一个局部对象，每个路由都会有一个route对象
Router是全局的实例对象，包含了所有的路由包含了许多关键的对象和属性

vue-router跳转和location.href的区别

1、vue-router使用的是pushState进行路由更新，页面不会刷新；location.href会重新加载页面
2、vue-router是同一个页面之间的跳转；location.href是不同页面的跳转