本篇文章主要介绍了vue-router模式和钩子的用法，现在分享给大家，也给大家做个参考。
上一篇主要写了一下vuer-router的基本使用，可以说解决温饱了，下面就再来点下午茶吧
模式
vue-router中的模式选项主要在router实例化的时候进行定义的，如下
const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes})
登录后复制
有两种模式可供选择，history 和 hash，大致对比一下，
立即学习“前端免费学习笔记（深入）”；
模式 优点 缺点hash使用简单、无需后台支持在url中以hash形式存在，不会传到后台history地址明确，便于理解和后台处理需要后台配合
hash模式对于后台来讲就是一个url，因为地址中的hash值是不会传到后台的，所以服务器端做一个根地址的映射就可以了。
history模式最终的路由都体现在url的pathname中，这部分是会传到服务器端的，因此需要服务端对每一个可能的path值都作相应的映射。或者采用模糊匹配的方式进行映射。
除此之外，history模式下，如果后端不是一对一的进行映射，而是模糊匹配的话，那么就要注意一下404的情况了。这个时候就需要在前端router中定义404页面了。
404路由的定义
由于router本身的匹配是从上到下的，如果在前面找到了匹配的路由，就跳转了。因此可以直接在最后添加404的路由，如下
let routerConfig = [{ path: '/pages', component: App, children: [{ path: 'demo/step1/list', component: coupon, name: 'coupon-list', meta: { title: '红包' } }]}, { path: '*', component: NotFound, name: 'notfound', meta: { title: '404-页面丢了' }}]
登录后复制
在前面匹配不到的时候，* 代表全部，就是都指向404页面
路由钩子
路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的，靠。。好拗口啊。
总体来讲vue里面提供了三大类钩子
1、全局钩子
2、某个路由独享的钩子
3、组件内钩子
全局钩子
顾名思义，全局钩子全局用，使用如下
const router = new VueRouter({ mode: 'history', base: __dirname, routes: routerConfig})router.beforeEach((to, from, next) => { document.title = to.meta.title || 'demo' if (!to.query.url && from.query.url) { to.query.url = from.query.url } next()})router.afterEach(route => {})
登录后复制
某个路由独享钩子
就像说的一样，给某个路由单独使用的，本质上和后面的组件内钩子是一样的。都是特指的某个路由。不同的是，这里的一般定义在router当中，而不是在组件内。如下
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... }, beforeLeave: (to, from, next) => { // ... } } ]})
登录后复制
组件内钩子
首先看一下官方定义：
你可以在路由组件内直接定义以下路由导航钩子
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
路由组件!路由组件!路由组件!重要的事情说三遍，大家一定要注意这里说的是“路由组件”，而路由组件！== 组件，路由组件！== 组件，路由组件！== 组件！之前一直没注意这点，然后在子组件里面傻乎乎的调钩子函数发现一直没用。。。
我们先来看一下什么是路由组件？
路由组件：直接定义在router中component处的组件
也就是说router中定义的入口vue文件之外的组件，是没有钩子函数的，也就不用说使用了。但是如果你使用了并不会报错，只是没反应。（本想画个图的，太懒了。。。自己理解理解吧，很好理解的）
这里再回头看下这个路由内钩子是怎么用的，很简单和data、method平级的方法
beforeRouteLeave(to, from, next) { // .... next()},beforeRouteEnter(to, from, next) { // .... next()},beforeRouteUpdate(to, from, next) { // .... next()},computed: {},method: {}
登录后复制
三种路由钩子中都涉及到了三个参数，这里直接上官方介绍吧
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
jQuery替换节点元素的操作方法
Servlet3.0与纯javascript通过Ajax交互的实例详解
vue 实现的树形菜的实例代码
以上就是如何使用Vue-Router模式和钩子（详细教程）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2750330.html
