Vue學習日記（三）——Vue路由管理vue-router

tuniutech 發布于2019-08-26 11:34 / 1660人閱讀

摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。

前言

為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網

項目構建

這里我采用vue-cli+webpack構建初始項目，在vue官網里面也有相關介紹，在這里我就手把手教大家一下吧，先通過控制臺進入相關的文件目錄下，然后輸入

# 后面是注釋
# $表示當前文件目錄

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
# 運行項目my-preoject
$ npm run dev

npm install --global vue-cli 下載構建工具

vue init webpack my-project 初始化項目

npm install 下載相關資源到node_models

npm run dev 運行項目后，在瀏覽器輸入http://localhost:8080/#/可看到

介紹vue-router

經過上面簡單的構建之后，一個項目的初始化就完成了，這里vue-cli和webpack已經幫我們弄好了文件目錄結構和基本目錄

在進行使用vue-router之前，我不得不也先介紹一下vue-router是什么？

它是一個vue.js下的路由組件，那什么是路由呢？網上有一大堆官方的介紹，相信對于小白是難以理解的，這里我就簡單的說明一下吧。

其實路由也就是url，url是什么呢？url就是唯一資源定位符，簡單的說，也就是標記頁面的唯一存在的一個標簽，就像https://www.baidu.com，這里的www.baidu.com就是唯一資源定位符，https就只是一種協議，規范計算機網絡的通信協議。

介紹完這些，那么對于我們究竟該怎么用呢？

其實很簡單，在平時當中，我們就經常碰到在一個網站里面點擊鏈接會彈到另外一個頁面，然后就可以發現他們的url改變了，而vue-router就是這樣，在同個域名下（這里的域名是http://localhost:8080），改變域名后面的字符參數，比如http://localhost:8080/me和http://localhost:8080/you是兩個不同的頁面就是靠vue-router進行實現的。

引用vue-router

如果你在之前沒有安裝vue-router的話，建議可以先去官網，看著文檔使用npm安裝一下，這里就不多做介紹了。

首先我先在項目my-project/src/components（存放組件的目錄）里面添加兩個文件me.vue和you.vue

// me.vue






// you.vue

然后修改my-project/src/router（存放路由相關信息的目錄）下面修改index.js成

import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"

// 導入組件
import me from "../components/me"
import you from "../components/you"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    },
    // 將組件命名到路由上，輸入http://localhost:8080/#/me
    // 即可進入不同的頁面
    {
      path: "/me",
      component: me
    },
    // 將組件命名到路由上，輸入http://localhost:8080/#/you
    // 即可進入不同的頁面
    {
      path: "/you",
      component: you
    }
  ]
})

這樣只會輸入http://localhost:8080/#/me就會進到其他頁面，是不是很簡單，
那么我們怎么在頁面里面進行跳轉呢？

這就運用到了更有趣的知識了就是router-link你只要在你的組件的代碼下輸入

這里是跳轉鏈接

網頁就自動跳轉到http://localhost:8080/#/me頁面了，但是這樣總是不好的，因為，如果由于一些原因，我們想修改路由的名字（比如me改成him）就得改兩個文件的信息，因此，vue團隊也早就想好了，就是name屬性，將my-project/src/router（存放路由相關信息的目錄）下面修改index.js成

    // ...
    {
      path: "/me",
      name: "me",
      component: me
    },
    // ...

然后跳轉就改成

這里是跳轉鏈接

就可以進行跳轉了

高級應用

前端路由最初級的應用，就和上面的引用一樣，當然還可以通過js代碼來改變，這個也很簡單，就是比如添加一個按鈕，點擊按鈕通過js跳轉到其他頁面，就是重定向，簡單的js代碼也下面這樣，就可以跳轉到其他頁面了

vue.$router.push("/me")

動態路由通過router-link傳遞參數，例如User，傳入userId這個參數，進行渲染不同的路由信息

嵌套路由嵌套路由其實簡單的理解就是，子路由，例如，我想在me下面在添加幾個路由him和she那上面的代碼可以這樣寫之后輸入http://localhost:8080/#/me/him就可以進入到子路由的頁面

// ...
    {
      path: "/me",
      name: "me",
      component: me，
      children: [
        {
            path: "him"
            // ...
        },
        {
            path: "she"
            // ...
        }
      ]
    },
    // ...

懶加載結合異步組件以及在組件的created鉤子上觸發獲取數據的ajax請求，可以最大化的降低加載時間，減少流量消耗。這個對于沒有項目的人可能接觸比較少，建議先知道這個概念。

重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問“個人信息”路由時應該重定向到登錄路由頁面。

History的控制 History是Html5的新語法，個人覺得就是對于跳轉的時候，特別是微信小程序，就是控制點擊回退按鈕的時候不至于退出頁面而跳轉到自己想要的頁面

總結

其實還有很多高級應用場景，我就不一一列舉出來了，因為這些其實最好還是上官方文檔進行說明，我這里只是解釋一下簡單的用法，以及初學者可能對官方文檔會有誤解來進行說明一下，希望大家還是學會看API，附官網地址

GPU云服務器云服務器 vue-router vue3 學習筆記 (五)——vue3 Vue_Vue Vue

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

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

Vue學習日記（三）——Vue路由管理vue-router

摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。前言為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網項目構建這里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 評論0 收藏0
Vue學習日記（三）——Vue路由管理vue-router

摘要：重定向可以實現某些需要根據特定邏輯改變頁面原本路由的需求，例如簡單的未登錄狀態下的頁面訪問個人信息路由時應該重定向到登錄路由頁面。前言為了給讀者更好的體驗，去理解vue-router和下一篇介紹vuex，決定還是來一個實戰教程來帶大家更加的去深入理解vue-router，在這之前，讀者先自行了解和去官網下載npm和node，附：npm官網項目構建這里我采用vue-cli+web...

aboutU 2019-08-01 18:31 評論0 收藏0
Vue學習日記（一）——Vue介紹

摘要：的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。的目標是通過盡可能簡單的實現響應的數據綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態環境組成了一個框架，下面，貼一個官方的漸進式框架介紹圖吧，方便理解。前言本人學習了一段時間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個項目之后，一直在邊學習邊使用，經過看了vue,vuex,vue-route...

王晗 2019-08-26 11:33 評論0 收藏0
Vue學習日記（一）——Vue介紹

摘要：的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。的目標是通過盡可能簡單的實現響應的數據綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態環境組成了一個框架，下面，貼一個官方的漸進式框架介紹圖吧，方便理解。前言本人學習了一段時間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個項目之后，一直在邊學習邊使用，經過看了vue,vuex,vue-route...

MasonEast 2019-08-29 14:22 評論0 收藏0
從頭開始學習vue-router

摘要：路由模塊的本質就是建立起和頁面之間的映射關系。這時候我們可以直接利用傳值了使用來匹配路由，然后通過來傳遞參數跳轉對應路由配置于是我們可以獲取參數六配置子路由二級路由實際生活中的應用界面，通常由多層嵌套的組件組合而成。一、前言要學習vue-router就要先知道這里的路由是什么？為什么我們不能像原來一樣直接用標簽編寫鏈接哪？vue-router如何使用？常見路由操作有哪些？等等這些問...

tommego 2019-08-23 12:55 評論0 收藏0