Vue Router 详解
hash本质上是改变window.location的href属性 ,你只能改变#后面的url片段。 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
history接口是HTML5新增的, history 它有五种模式改变URL而不刷新页面.
(1)params 刷新页面参数会丢失
(2)query 刷新页面参数不丢失
全局守卫:
跳转前: router.beforeEach((to,from,next)=>{
to: Route : 即将要进入的目标 [路由对象]
from: Route : 当前导航正要离开的路由
next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next() : 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }) : 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在router-link 的 to prop 或 router.push中的选项。
next(error)导航会被终止且该错误会被传递给 router.onError()注册过的回调
})
跳转后 : router.afterEach((to,from)=>{// ...})
beforeEnter: (to, from, next) => { }
router.push(url) 导航到新url,向 history栈添加一条新访问记录,等同于window.history.pushState
router.replace(url) 导航到新url,替换 history 栈中当前记录,等同于window.history.replaceState
router.go(n) 在 history 记录中向前或者后退多少步,类似 window.history.go(n)
router.go(1) 在浏览器记录中前进一步,等同于 history.forward()
router.go(-1) 后退一步记录,等同于 history.back()
router.go(0) 刷新当前页面
router.back() 导航回退一步,类似于router.go(-1)
router. forward() 导航前进一步,但是不刷新前进页的表单,类似于router.go(1)