成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue學(xué)習(xí)日記（三）——Vue路由管理vue-router

iKcamp / 1290人閱讀

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

前言

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

項目構(gòu)建

這里我采用vue-cli+webpack構(gòu)建初始項目，在vue官網(wǎng)里面也有相關(guān)介紹，在這里我就手把手教大家一下吧，先通過控制臺進(jìn)入相關(guān)的文件目錄下，然后輸入

# 后面是注釋
# $表示當(dāng)前文件目錄

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

npm install --global vue-cli 下載構(gòu)建工具

vue init webpack my-project 初始化項目

npm install 下載相關(guān)資源到node_models

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

介紹vue-router

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

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

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

其實路由也就是url，url是什么呢？url就是唯一資源定位符，簡單的說，也就是標(biāo)記頁面的唯一存在的一個標(biāo)簽，就像https://www.baidu.com，這里的www.baidu.com就是唯一資源定位符，https就只是一種協(xié)議，規(guī)范計算機(jī)網(wǎng)絡(luò)的通信協(xié)議。

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

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

引用vue-router

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

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

// me.vue






// you.vue

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

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

// 導(dǎo)入組件
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
    // 即可進(jìn)入不同的頁面
    {
      path: "/me",
      component: me
    },
    // 將組件命名到路由上，輸入http://localhost:8080/#/you
    // 即可進(jìn)入不同的頁面
    {
      path: "/you",
      component: you
    }
  ]
})

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

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

這里是跳轉(zhuǎn)鏈接

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

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

然后跳轉(zhuǎn)就改成

這里是跳轉(zhuǎn)鏈接

就可以進(jìn)行跳轉(zhuǎn)了

高級應(yīng)用

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

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

動態(tài)路由 通過router-link傳遞參數(shù)，例如User，傳入userId這個參數(shù)，進(jìn)行渲染不同的路由信息

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

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

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

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

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

總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115618.html

相關(guān)文章

  • Vue學(xué)習(xí)日記（三）——Vue路由管理vue-router

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

    tuniutech 評論0 收藏0

  • Vue學(xué)習(xí)日記（三）——Vue路由管理vue-router

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

    aboutU 評論0 收藏0

  • Vue學(xué)習(xí)日記（一）——Vue介紹

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

    王晗 評論0 收藏0

  • Vue學(xué)習(xí)日記（一）——Vue介紹

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

    MasonEast 評論0 收藏0

  • 從頭開始學(xué)習(xí)vue-router

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

    tommego 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<