使用Vue快速开发单页应用－vue-router

mingde 发布于2019-08-20 10:29 / 2867人阅读

摘要：当前路由对象调用此函数处理切换过程的下一步终止切换重定向到另一个路由由于是路由切换后，只有上面的两个属性。原文地址其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信

本文所涉及代码全在vue-cnode

vue-router主要作用是将路由控制，转移到前端。我们将会在vue-router里面保存一个路由表，在vue中具体通过调用提供的指令或则方法进行跳转。

其实吧，vue-router说白了就是一个插件，对外暴露的也就是指令和方法。如果只要求灵活用起来，我们需要学习的也就3个地方：

配置路由

指令

方法

配置路由

路由配置其实是分两步的，第一步把vue-router的指令方法挂到Vue实例，第二步才是添加路由配置上。下面是基本的路由配置：

import Vue from "vue"
import VueRouter from "vue-router"
import App from "App.vue"
Vue.use(VueRouter) // 第一步
const router = new VueRouter({
  history: true,
  saveScrollPosition: true
}) // 第二步
router.map({
    "/": {
      name: "index",
      title: "全部",
      component: (resolve) => require(["./components/main/index.vue"], resolve)
    },
    "/good": {
      name: "good",
      title: "精华",
      component: (resolve) => require(["./components/main/index.vue"], resolve)
    }
  })
router.start(App, "#app")

这里大家可以去看看源码，源码很简洁。主要就是声明了一个Router的对象，Router上面插件要的install方法，然后还有start方法。

源码片段

class Router {

  constructor ({
    hashbang = true,
    abstract = false,
    history = false,
    saveScrollPosition = false,
    transitionOnLoad = false,
    suppressTransitionError = false,
    root = null,
    linkActiveClass = "v-link-active"
  } = {}) {
    ....
  }
Router.install = function (externalVue) {
  ....
  Vue = externalVue
  applyOverride(Vue)
  View(Vue)
  Link(Vue)
  util.Vue = Vue
}

源码中在Router一共有9个方法：

map

redirect

alias

beforeEach

afterEach

replace

start

stop

其中start是初始化组件的，

其中涉及路由前期配置的是：map, redirect，alias，beforeEach，afterEach，start。go和replace两个方法都是路由跳转的。

map，redirect，alias这3个方法是基础的配置方法，很简单，就请看文档吧。

这里主要讲下beforeEach和afterEach，就和方法名一样他们分别是在路由跳转前后做的一些事情。

在vue-router有一个路由声明周期的概念，这里不展开来讲，你只需要知道我们berforeEach和afterEach后面接的函数是一个钩子函数，钩子函数接受的第一个参数是一个transition对象,transition对象有以下方法，主要是用来控制路由跳转的。

transition.to 一个我们将要跳转去的路由的对象，这个对象可能有path,name等属性。

transition.from 当前路由对象

transition.next() 调用此函数处理切换过程的下一步

transition.abort([reason]) 终止切换

transition.redirect(path) 重定向到另一个路由

afterEach由于是路由切换后，只有上面的to,from两个属性。

为什么要多带带讲beforEach和afterEach，因为我们可以在里面做很多全局的东西。比如登陆跳转、文章切换title、特定页面设置属性、调用vuex的方法等。这里我们讲一个刷新title的例子。后续还会有一个全局控制的文章，再补充些其他例子。

单页应用从始至终都只有会请求一个html，也就需要动态的改变，document title, 我们完全可以将修改title这个过程提到全局，在afterEach里面做，如下所示：

router.map({
    "/": {
      name: "index",
      title: "全部",
      component: (resolve) => require(["./components/main/index.vue"], resolve)
    }
  }
  // document title change
  router.afterEach((transition) => {
    document.title = transition.to.title || "CNode.js"
  })

在ios下面上述方法还不行，因为ios上有一个bug，不会再修改document.title时更新浏览器上面的title。因为这里并不是真正刷新页面，所以ios下不会调用浏览器更新title的事件吧。

可以用一个iframe的hack方法

指令

vue-router 提供的指令就一个：v-link。

他的作用就是跳转路由。具体用法如下：


Home


Home


User

详细的用法建议看文档

方法

vue在use vue-router之后就会添加一个$route的属性。里面有很多属性，主要的就是router下面的方法。
我们用的较多的是router.go,还有就是router.on。
这里还是建议看文档，比我搬过来要详细的多。

原文地址：http://hiluluke.cn/2016/08/05...

其他

使用Vue快速开发单页应用－主体结构

使用Vue快速开发单页应用－vue-router

使用Vue快速开发单页应用－登录页面

使用Vue快速开发单页应用－功能组件与路由组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80173.html

使用Vue快速开发单页应用－主体结构

摘要：本文以及后面相应文章，主要是相关技术栈来快速的实现单页应用开发。原文出处其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode 单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。将逻辑从...

dcr309duan 2019-08-20 10:29 评论0 收藏0
使用Vue快速开发单页应用－登录页面

摘要：首先我们从登录页面以及开始，因为后续很多其它的页面都需要登录信息。大家还是看看我这做个指引，具体还是看代码原文地址其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode 前面两篇都是介绍组织结构和vue-router，从本文开始我们将讲一些如何优雅的用vue编写单页应用。首先我们从...

yeyan1996 2019-08-20 10:29 评论0 收藏0
一套Vue的单页模板：N3-admin

摘要：趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把这套基于的单页应用模板简单的给介绍一下。同时也是一套可扩展的单页应用开发模板。趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下。首发于个人博客；blog.lxstart.net项目路径: https://github.com/N3-co...

CloudDeveloper 2019-08-02 15:57 评论0 收藏0
一套Vue的单页模板：N3-admin

摘要：趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把这套基于的单页应用模板简单的给介绍一下。同时也是一套可扩展的单页应用开发模板。趁着周末偷来一点闲，总结近期的工作和学习，想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下。首发于个人博客；blog.lxstart.net项目路径: https://github.com/N3-co...

weizx 2019-08-21 11:54 评论0 收藏0