在上一篇总结了vue-router中的路由切换、重定向和路由传参等知识,因为篇幅的原因,便将剩下的路由模块化、路由嵌套、history模式、路由守卫等放在这里来写了。因为是继续前面的写。所以代码也还是用的前面的,有需要的可以自己去上一篇的最后下载。

新窗口打开

在vue中,路由跳转有两种模式,而这两种模式下的新窗口打开方式也是不一样的。

router-link路由导航

因为router-link在DOM中的最终渲染结果就是<a>标签,所以可以采用<a>标签的方法,为元素添加target="_blank"属性就可以了。

这样,当点击导航按钮跳转到one.vue页面的时候,会是在新窗口打开这个页面。

编程式导航

编程式导航要实现新窗口打开页面,需要借助$router.resolve,在前面,我们在one.vue页面中添加了一个按钮,并为这个按钮添加了点击事件,跳转到two.vue页面。

如果要想实现在新窗口打开目标页面,只需要修改事件方法就可以了。

路由模块化

到目前为止,项目中所有与路由相关的内容都放置在了src文件夹下面的router文件夹下的router.js文件中。

但是在实际的项目中,路由肯定比现在的复杂,而且可能还需要添加路由守卫等等,如果将所有的内容全部放在一个文件里面,是不便于维护的,所以需要使用模块化路由。

首先需要在router文件夹下新建index.js文件,然后对之前router.js里面的内容进行分割,并在index.js中引入router.js

    

然后,因为在之前,所有的内容都放在了router.js里面了,所以在main.js中,引入的是router.js。但是现在,router.js里面只放路由配置,其他的内容全部都放在了index.js里面了,包括路由暴露,所以还需要修改main.js。

路由嵌套

现在假设项目有两个模块:首页和新闻模块,而新闻模块包括one、two、thr三个子模块。那么在路由设置上,就需要设置两个一级路由:home和news,然后news下面再添加三个子路由,这就是路由嵌套。

为了实现路由嵌套,首先对项目进行相应的改变:将one.vue、two.vue和thr.vue恢复为最基本的初始结构,然后添加一个标题:

然后在page文件夹下面添加home.vue和news.vue

   

接下来配置路由,只需要修改router.js就可以了

最后只需要在App.js中添加路由导航和占位符就可以了。

到现在,只是实现了基本的路由跳转

接下来才是路由嵌套

首先配置路由,因为三个新闻页面都是新闻模块的子模块,所以需要将路由配置在news里面

然后需要将路由导航和路由出口放置在父级路由页面中,这里是news.vue

    

history模式

在前面所以的演示中,我们会发现地址栏中都会带有#,而不是平常所看到的那种路由,这是因为使用hash模式,在vue中,路由有两种模式,hash模式和history模式,默认是hash模式,url使用#后面定位路由,对SEO不利。

所以,我们可以采用history模式,只需要在router文件夹下面的index.js进行简单设置就可以了。

  

但是,使用这种模式也会问题的,如果使用history模式,那么打包后的项目只能放在服务器的根目录,否则会报错,试过很多次,还没有找到好的解决办法额。

代码下载:点这里

路由守卫

全局守卫

在实际工作,为了保证系统的安全性,用户必须成功登录以后才能浏览系统中的其他页面,例如,在上面的例子,将Home页面改为登录页,用户只要登录后,才能看到新闻,也就是说,在路由跳转前,需要进行一个判断,该用户是否登录了。

为了表示登录,在用户登录后,在本地存储一个token

这样,只要每次进行路由跳转前,判断本地是否存储有token,就能知道用户是否登录了,但是如果在每个路由跳转的地方添加一次判断,是不太现实的,所以,需要使用router.beforeEach实现全局路由守卫,也就是每次路由跳转前,都会走这个方法。

其中/home?redirect='+to.path的作用是记录当前想要去的页面,然后跳转到登录页进行登录成功后,会直接进入这个页面。

beforeEach的三个参数分别表示:

  • to: Route: 即将要进入的目标路由对象

  • from: Route: 当前导航正要离开的路由

  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

独享守卫

当然了,除了为所有的路由统一添加路由守卫外,还可以单独为某个路由添加独有的路由守卫。

组件内守卫

组件内的守卫,主要有三个beforeRouteEnter()、beforeRouteUpdate()、beforeRouteLeave()

用法和beforeEach是一样的。

关于这三个,官方文档给出的解释如下:

代码下载:点这里

vue-router总结2的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  2. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  4. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  5. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  6. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  7. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  8. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  9. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  10. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

随机推荐

  1. Codeforces Round #516(Div 2)

    比赛链接:传送门 A. Make a triangle!(简单思维) 题目大意: 给你三条边,问你最多加多少长度能使这三条边能构成三角形. 思路: 最大边小于答案加另外两条边的和. #include ...

  2. (1)MySQL(入门操作安装\基本指令)

    什么是MySQL MySQL本质上就是用来管理数据的---用来做增.删.改.查 使用MySQL后管理数据就相对简单方便 数据库软件的种类: 1.什么是关系型数据库(关系型数据库特点就是对数据格式可以有 ...

  3. 公钥与私钥,HTTPS详解 转载

    1.公钥与私钥原理1)鲍勃有两把钥匙,一把是公钥,另一把是私钥2)鲍勃把公钥送给他的朋友们----帕蒂.道格.苏珊----每人一把.3)苏珊要给鲍勃写一封保密的信.她写完后用鲍勃的公钥加密,就可以达到 ...

  4. vim 自动注释

    开启了自动注释和自动缩进对粘帖代码不方便   关闭自动注释 :set fo-=r  关闭自动缩进(这个对C/C++代码好像无效) :set noautoindent 关闭C语言缩进  :set noc ...

  5. 10 BPMN PDF books, articles and brochures

    转自:https://www.heflo.com/blog/bpm/bpmn-pdf/ If you are looking for more information about BPMN (Busi ...

  6. graalvm 简单试用

      安装 地址 http://www.graalvm.org/downloads/ 配置环境变量 linux: export PATH=/path/to/graalvm/bin:$PATH mac: ...

  7. DevExpress皮肤样式

    [时间] 2016-02-15 11:41:11 天气晴 没有雾霾难得的好天气!!! [工具] (1)Visual Studio 2015 (2)DevExpress15.2.3 [感言] 一直以来都 ...

  8. VS打包项目详细解析

       使用VS打包项目,其实很多简单.微软官方文档很详尽,故不再细述,只列出相关链接 1创建安装项目 如何:创建或添加部署项目 2 添加项目输出 如何:向部署项目中添加项 3添加用户界面 部署中的用户 ...

  9. 存储-实例-ibm v3700

    raid5总容量计算(n-1)*最小盘容量 RAID0:N块盘组成,逻辑容量为N块盘容量之和:RAID1:两块盘组成,逻辑容量为一块盘容量:RAID3:N+1块盘组成,逻辑容量为N块盘容量之和:RAI ...

  10. Windows2008R2系统运行时间超过497天的bug

    早上接到客户电话,说一台测试服务器tomcat服务无法访问,登录服务器查看tomcat连接数据库故障. 使用plsql develop工具登录,提示 ora-12560 TNS:protocol ad ...