使用Vue快速開發(fā)單頁應用－vue-router

mingde 發(fā)布于2019-08-20 10:29 / 2872人閱讀

摘要：當前路由對象調(diào)用此函數(shù)處理切換過程的下一步終止切換重定向到另一個路由由于是路由切換后，只有上面的兩個屬性。原文地址其他使用快速開發(fā)單頁應用主體結構使用快速開發(fā)單頁應用使用快速開發(fā)單頁應用登錄頁面使用快速開發(fā)單頁應用功能組件與路由組件通信

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

vue-router主要作用是將路由控制，轉移到前端。我們將會在vue-router里面保存一個路由表，在vue中具體通過調(diào)用提供的指令或則方法進行跳轉。

其實吧，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后面接的函數(shù)是一個鉤子函數(shù)，鉤子函數(shù)接受的第一個參數(shù)是一個transition對象,transition對象有以下方法，主要是用來控制路由跳轉的。

transition.to 一個我們將要跳轉去的路由的對象，這個對象可能有path,name等屬性。

transition.from 當前路由對象

transition.next() 調(diào)用此函數(shù)處理切換過程的下一步

transition.abort([reason]) 終止切換

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

afterEach由于是路由切換后，只有上面的to,from兩個屬性。

為什么要多帶帶講beforEach和afterEach，因為我們可以在里面做很多全局的東西。比如登陸跳轉、文章切換title、特定頁面設置屬性、調(diào)用vuex的方法等。這里我們講一個刷新title的例子。后續(xù)還會有一個全局控制的文章，再補充些其他例子。

單頁應用從始至終都只有會請求一個html，也就需要動態(tài)的改變，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下不會調(diào)用瀏覽器更新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快速開發(fā)單頁應用－主體結構

使用Vue快速開發(fā)單頁應用－vue-router

使用Vue快速開發(fā)單頁應用－登錄頁面

使用Vue快速開發(fā)單頁應用－功能組件與路由組件通信

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80173.html

使用Vue快速開發(fā)單頁應用－主體結構

摘要：本文以及后面相應文章，主要是相關技術棧來快速的實現(xiàn)單頁應用開發(fā)。原文出處其他使用快速開發(fā)單頁應用主體結構使用快速開發(fā)單頁應用使用快速開發(fā)單頁應用登錄頁面使用快速開發(fā)單頁應用功能組件與路由組件通信本文所涉及代碼全在vue-cnode 單頁應用，即在一個頁面集成系統(tǒng)中所有功能，整個應用只有一個頁面。因為路由的控制在前端，單頁面應用在頁面切換時比傳統(tǒng)頁面更快，從而在前端體驗更好。將邏輯從...

dcr309duan 2019-08-20 10:29 評論0 收藏0
使用Vue快速開發(fā)單頁應用－登錄頁面

摘要：首先我們從登錄頁面以及開始，因為后續(xù)很多其它的頁面都需要登錄信息。大家還是看看我這做個指引，具體還是看代碼原文地址其他使用快速開發(fā)單頁應用主體結構使用快速開發(fā)單頁應用使用快速開發(fā)單頁應用登錄頁面使用快速開發(fā)單頁應用功能組件與路由組件通信本文所涉及代碼全在vue-cnode 前面兩篇都是介紹組織結構和vue-router，從本文開始我們將講一些如何優(yōu)雅的用vue編寫單頁應用。首先我們從...

yeyan1996 2019-08-20 10:29 評論0 收藏0
一套Vue的單頁模板：N3-admin

摘要：趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發(fā)模板。趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把N3-admin這套基于N3-components的單頁應用模板簡單的給介紹一下。首發(fā)于個人博客；blog.lxstart.net項目路徑: https://github.com/N3-co...

CloudDeveloper 2019-08-02 15:57 評論0 收藏0
一套Vue的單頁模板：N3-admin

摘要：趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把這套基于的單頁應用模板簡單的給介紹一下。同時也是一套可擴展的單頁應用開發(fā)模板。趁著周末偷來一點閑，總結近期的工作和學習，想著該花點心思把N3-admin這套基于N3-components的單頁應用模板簡單的給介紹一下。首發(fā)于個人博客；blog.lxstart.net項目路徑: https://github.com/N3-co...

weizx 2019-08-21 11:54 評論0 收藏0