大家好，我是讯享网，很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p> 

讯享网

1.1 如果还没安装node.js， 则先安装node.js ，安装完成后，查看node版本

讯享网

1.2 安装淘宝镜像， 安装完成后查看npm版本：npm -v

1.3 安装webpack

讯享网

1.4 安装vue全局脚手架，vue-cli2.x使用 npm install -g vue-cli ， vue-cli3.x使用 npm install -g @vue/cli 安装， 查看vue版本： vue -V

1.5 准备工作做好了，开始正式创建vue项目， 创建vue项目可以选择两种方式。下面的my_vue_pro是vue项目名字

讯享网

vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录。 vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与vue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。

如果vue版本还是2.x, 从vue-cli2.x升级到最新版：先执行卸载： npm uninstall -g vue-cli ， 再安装最新版 npm install -g @vue/cli

1.6 cd进入项目

1.7 添加需要的依赖包，比如添加vue路由vue-router依赖包，可以使用 npm install vue-router , 或者 vue add router

讯享网

1.8 安装所有依赖包， npm install 。卸载依赖包： npm uninstall xxx

1.9 运行项目，查看package.json文件中的scripts脚本中的运行方式， npm run dev 或 npm run serve

讯享网

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

为了加深对路由的理解，在安装vue-router包后，如果项目自动生成了router.js， 先删除，我们手动来写一个router.js。创建router.js后，再 - 新增加2个vue页面，命名pageA和pageB，如下图：

讯享网
main.js是vue项目的入口脚本，在这里引入router.js, 传入路由配置。

2.1 路由视图 组件和 路由导航组件

在项目启动模板页App.vue上面有个路由视图组件，相当于是一个占位符一样（插槽也类似），之后页面的路由变化引起的页面替换都是在路由视图上进行。

而有点类似于超链接标签，上有个必写的属性to, 就类似于超链接的href属性，设置要跳转的路由链接。

App.Vue测试代码：

讯享网

2.2 路径参数和查询参数

路径参数和查询参数作为页面之间的数据传递的一种方式，使用非常频繁。路径参数，望文生义意思是参数作为路径的一部分，在配置路由的时候把参数配置好，然后在浏览器中输入url时，必须传参，否则会找不到这个路由这个页面。例如，pageA页面的路由配置为：/pageA/:id/:name ，意思是pageA页面后面必须传一个id参数和name参数，这两个参数作为路径的一部分，必须传值。然后在pageA页面中用：this.\(route.params 来获取所有的路径参数。</p> <p>而查询参数则没有路径参数这么严格&#xff0c;路由不会对此做验证。路由参数在url中的表现为页面链接后面加 ?key&#61;value&amp;… &#xff0c; 然后在页面中用&#xff1a;this.\)route.query 来获取所有查询参数。如下图：

我们打印this.\(route变量&#xff0c;看到如上图右边部分内容&#xff1a;</p> <ul><li>this.\)route.name : 页面名字。这个name就是在router.js中配置的那个name, 这个name也是有大用处的，比如在中使用“命名路由”的时候就是用到它，举例说明，通过在路由链接标签的to属性设置name和相应的参数，然后跳转效果和设置路由path是一样的：

this.\(route.path: 路由路径&#xff0c;包含路径参数&#xff0c;不包含查询参数</li><li>this.\)route.fullPath： 路由全路径，包含路径参数和查询参数

this.\(route.query: 路径所有查询参数</li><li>this.\)route.params: 路径所有路径参数

this.\(route.meta: 路由元信息&#xff0c;在配置路由的时候可以把自定义的一些数据存在meta中&#xff0c;用作其他用途</li><li>this.\)route.matched: 里面包含了路由的一些匹配信息

2.3 路由props设置及路径参数获取

在设置页面路由时，如果增加一个props属性，并设置为true, 则在页面中可以直接拿到参数，不需要通过this.\(route.params来取参数。比如router.js中部分代码&#xff1a;</p> <pre></pre> <p>在PageC页面中参数获取&#xff1a;</p> <pre></pre> <h5>2.4 嵌套路由。实际生活中的应用界面&#xff0c;通常由多层嵌套的组件组合而成。同样地&#xff0c;URL 中各段动态路径也按某种结构对应嵌套的各层组件。比如现在PageB页面中嵌入页面PageC, 则需要在PageB页面中增加一个路由视图标签&#xff0c;作为嵌套页面PageC的占位符。</h5> <p>路由部分代码&#xff1a;</p> <pre></pre> <p>PageB页面中部分代码&#xff1a;</p> <pre></pre> <p>效果图&#xff1a;<br /> <img src="https://i-blog.csdnimg.cn/blog_migrate/e35babc9036dee2428c5f47b38c5f6bc.png" alt="在这里插入图片描述" /></p> <h5>2.5 编程式的导航。　叫声明式导航&#xff0c;还有种编程式导航&#xff0c;格式为&#xff1a;router.push(location, onComplete?, onAbort?), 在页面中的使用例子&#xff1a;</h5> <pre></pre> <p>同样的编程式导航规则也适用于导航组件的to属性</p> <p>router.replace(location, onComplete?, onAbort?) 和router.push(…)很像&#xff0c;唯一的不同就是&#xff0c;它不会向 history 添加新记录&#xff0c;而是跟它的方法名一样 —— 替换掉当前的 history 记录。声明式导航替换用法&#xff1a; &#xff0c;编程式导航替换用法&#xff1a; router.replace(…)</p> <pre></pre> <pre></pre> <h5>2.6 命名视图。有时候想同时 (同级) 展示多个视图&#xff0c;而不是嵌套展示&#xff0c;例如创建一个布局&#xff0c;有 sidebar (侧导航) 和 main (主内容) 两个视图&#xff0c;这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图&#xff0c;而不是只有一个单独的出口。如果 router-view 没有设置名字&#xff0c;那么默认为 default。</h5> <p>router.js中部分代码&#xff1a;</p> <pre></pre> <p>App.vue中部分代码&#xff1a;</p> <pre></pre> <p><img src="https://i-blog.csdnimg.cn/blog_migrate/ab5fb6eb13bfd6b2922a11137c6eeedb.png" alt="在这里插入图片描述" /></p> <h5>2.7 路由模式。</h5> <p>默认路由模式是hash模式&#xff0c;即地址栏中域名后带有#符号&#xff08;此 hash 不是密码学里的散列运算&#xff09;。它的特点就是使用 URL 的 hash 来模拟一个完整的 URL&#xff0c;于是当 URL 改变时&#xff0c;页面不会重新加载。不过看起来不是很美观&#xff0c;另外hash模式的路由&#xff0c;在作为回调地址和一些第三方公司合作时&#xff0c;会有点麻烦&#xff0c;比如如果想实现微信快捷登录或者获取微信用户授权时&#xff0c;当微信用户授权成功后&#xff0c;回跳回来时&#xff0c;微信返回的code参数会插入到#符号前面&#xff0c;这样的话就为了获取这个code&#xff0c;就需要一系列的另外操作了。</p> <p>&amp;nbsp 路由模式还有另外一种模式就是history模式&#xff0c;这种模式是没有#符号的&#xff0c;符合我们平常的使用习惯。这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。</p> <pre></pre> <p><img src="https://i-blog.csdnimg.cn/blog_migrate/24f8a8f2949579c2184534c528373d50.png" alt="在这里插入图片描述" /><br /> 　不过这种模式要玩好&#xff0c;还需要后台配置支持。因为我们的应用是个单页客户端应用&#xff0c;如果后台没有正确的配置&#xff0c;当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404&#xff0c;这就不好看了。</p> <p>所以呢&#xff0c;你要在服务端增加一个覆盖所有情况的候选资源&#xff1a;如果 URL 匹配不到任何静态资源&#xff0c;则应该返回同一个 index.html 页面&#xff0c;这个页面就是你 app 依赖的页面。</p> <h5>2.8 vue 获取当前路由地址——router.currentRoute与\)route

讯享网

2.9 Vue-router中meta属性的用法

定义路由的时候可以配置 meta 字段：

讯享网

那么如何访问这个 meta 字段呢？

首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

例如，根据上面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 \(route 对象 (还有在导航守卫中的路由对象) 的 \)route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示的是在全局导航守卫中检查元字段：

“导航”表示路由正在发生改变，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航，从而达到控制导航走向。有多种机会植入路由导航过程中：全局的，单个路由独享的，或者组件级的。

3.1 全局前置守卫： router.beforeEach

讯享网

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航所在所有守卫resolve完之前一直处于等待中。

每个守卫方法接收三个参数：

• 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): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

3.2 全局解析守卫：

router.beforeResolve ，这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

3.3 全局后置钩子：

router.afterEach ，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

3.4 路由独享守卫： beforeEnter ，参数和全局前置守卫一样，执行顺序在全局前置守卫之后，在全局解析守卫之前。

router.js中部分测试代码：

讯享网

3.5 组件内路由守卫。进入组件时、组件路径参数变化时，离开组件时分别监听。

注意： beforeRouteEnter 守卫卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

讯享网

• beforeRouteEnter 是支持 给next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this已经可用了，所以不支持传递回调，因为没有必要了。
• beforeRouteLeave 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

1. 导航被触发。
2. 在失活的组件里调用离开守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter 。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter 。
8. 调用全局的 beforeResolve 守卫 (2.5+)
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

———————– 导航守卫调用步骤记录 —————

讯享网

测试DEMO：https://github.com/xiaotanit/tan_vue