1、hash 模式是用 createWebHashHistory()
创建的,它在内部传递的实际 URL 之前使用了一个哈希字符(#
)。由于这部分 URL 从未被发送到服务器,所以它不需要在服务器层面上进行任何特殊处理。
用 createWebHistory()
创建 HTML5 模式,推荐使用这个模式。由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接问 https://example.com/user/id
,就会得到一个 404 错误。要解决这个问题,你需要做的就是在你的服务器上添加一个简单的回退路由。
2、Vue-router 导航守卫有哪些?
全局导航守卫:beforeeach、beforeResolve、aftereach
before-each:当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。
入参:to
: 即将要进入的目标 from
: 当前导航正要离开的路由
返回值:false
: 取消当前的导航。或者是一个路由地址: 通过一个路由地址跳转到一个不同的地址。
注意别在回调中死循环。
beforeResolve
:这和 router.beforeEach
类似,因为它在 每次导航时都会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。router.beforeResolve
是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。
afterEach:这些钩子不会接受 next
函数也不会改变导航本身,它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
路由守卫:beforeEnter
beforeEnter
守卫 只在进入路由时触发,不会在 params
、query
或 hash
改变时触发。例如,从 /users/2
进入到 /users/3
或者从 /users/2#info
进入到 /users/2#projects
。它们只有在 从一个不同的 路由导航时,才会被触发。
你也可以将一个函数数组传递给 beforeEnter
,这在为不同的路由重用守卫时很有用。
组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` !
// 因为当守卫执行时,组件实例还没被创建!
},
beforeRouteUpdate(to, from) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候,
// 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this`
},
beforeRouteEnter
守卫 不能 访问 this
,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过,你可以通过传一个回调给 next
来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
完整的导航解析流程:
导航被触发;
失活的组件守卫beforerouterleave
全局守卫before each
复用的组件守卫beforerouterupdate(只是路由参数不同时会复用)
路由守卫beforeEnter
解析异步路由组件
组件守卫beforerouterenter
全局守卫beforeResolve
导航被确认
全局守卫afterEach
触发dom更新
beforerouterenter中的next回调
3、meta字段
有时,你可能希望将任意信息附加到路由上,如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta
属性来实现,并且它可以在路由地址和导航守卫上都被访问到。
定义的时候定义在route对象中,获取的时候通过to.meta获取
4、动态路由
router.addRoute
router.removeRoute