在上一篇总结了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. 一次scrapy失败的提示信息:由于连接方在一段时间后没有正确答复或连接的主机没有反 应,连接尝试失败

    2017-10-31 19:09:26 [scrapy.extensions.logstats] INFO: Crawled 8096 pages (at 67 pages/min), scraped ...

  2. js framework comparation

    starting a new project:(finance project for p2p -- like lending club, or prosper ) ,we considering a ...

  3. Queue接口的实现类竟然有一个是LinkedList,一个是优先队列(同一个接口,只改了不同的实现类,附源码)

    输出是: Queue接口底层换一个实现类,照样的是调用Queue接口中的方法 import java.util.HashMap; import java.util.LinkedList; import ...

  4. 企业wiki之confluence安装部署(linux)及其破解

    系统环境(虚拟机) centos6.5   2G运行内存,30g硬盘,cpu最好也分配两个或多个,因为我在安装过程中发现很卡,cpu占用率几乎占满 需要用到的安装包和文件可以在这里找 链接:https ...

  5. 使用python比较两个文件的不同之处

    比较两个文件的不同之处用处还是比较大的,特别是比较两个版本的不同之处 [root@localhost python]# cat diftest.py #!/usr/bin/python import ...

  6. <--------------------------构造方法------------------------------>

    1 构造方法 初始化阶段 给对象的属性进行赋值 构造方法 什么是构造方法 : 字面 方法构建时 就使用的方法 对象创建的时候就使用的方法 作用:对象的属性值初始化2 如何用构造方法 修饰符 构造方法名 ...

  7. scala学习笔记-面向对象编程之Trait

    将trait作为接口使用 1 // Scala中的Triat是一种特殊的概念 2 // 首先我们可以将Trait作为接口来使用,此时的Triat就与Java中的接口非常类似 3 // 在triat中可 ...

  8. pghoard 面向云存储的pg 备份&&恢复工具

    pghoard 面向云存储的pg 备份&&恢复工具 包含的特性 自动定期basebackup 自动事务日志(WAL / Xlog软件)备份(使用pg_receivexlog, arch ...

  9. CommonJS 规范中的 module、module.exports 区别

    CommonJS 规范中的 module.module.exports 区别 CommonJS规范规定,每个模块内部,module变量代表当前模块.这个变量是一个对象,它的exports属性(即mod ...

  10. node 各模块及对应功能

    node 各模块及对应功能 node 模块 对应功能 net 处理 TCP dgram 处理 UDP http 处理 HTTP/1 http2 处理 HTTP/2 https 处理 HTTPS tls ...