Vue路由

church 發(fā)布于2019-08-21 16:26 / 1735人閱讀

摘要：定義路由創(chuàng)建實(shí)例，然后傳配置創(chuàng)建和掛載根實(shí)例。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子全局的單個(gè)路由獨(dú)享的或者組件級(jí)的。例如，根據(jù)上面的路由配置，這個(gè)將會(huì)匹配父路由記錄以及子路由記錄。因此，我們需要遍歷來(lái)檢查路由記錄中的字段。

Vue-router(路由) 安裝 CDN引入(非打包)：

NPM安裝(打包)：

npm install vue-router

開(kāi)始使用

在使用Vue.js的時(shí)候，我們通過(guò)組合組件來(lái)組成應(yīng)用程序，現(xiàn)在我們要把vue-router添加進(jìn)來(lái)，只需要將組件（components）映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

div id="app">

Hello App!

Go to Home Go to Foo Go to Bar

動(dòng)態(tài)路由

例如，我們有一個(gè) User 組件，對(duì)于所有 ID 各不相同的用戶，都要使用這個(gè)組件來(lái)渲染。那么，我們可以在 vue-router 的路由路徑中使用『動(dòng)態(tài)路徑參數(shù)』（dynamic segment）來(lái)達(dá)到這個(gè)效果：

div id="app">

Hello App!

Go to Foo
Go to Bar
user

嵌套路由

借助 vue-router，使用嵌套路由配置，就可以很簡(jiǎn)單地表達(dá)組件中的層級(jí)關(guān)系
實(shí)際上，在上面的動(dòng)態(tài)路由的例子中就已經(jīng)使用了嵌套了，定義路由時(shí)添加一個(gè)　children 屬性即可：

const routes=[
    {
        path:"/user",
        component:User,
        children:[
            {
                path:":name",
                component:{
                    template:"pureview"
                }
            }
        ]
    }
]

編程式導(dǎo)航

除了使用  創(chuàng)建 a 標(biāo)簽來(lái)定義導(dǎo)航鏈接，我們還可以借助 router 的實(shí)例方法，通過(guò)編寫(xiě)代碼來(lái)實(shí)現(xiàn)。

router.push(location)

想要導(dǎo)航到不同的 URL，則使用 router.push 方法。這個(gè)方法會(huì)向 history 棧添加一個(gè)新的記錄，所以，當(dāng)用戶點(diǎn)擊瀏覽器后退按鈕時(shí)，則回到之前的 URL。

等同于調(diào)用 router.push(...)。

// 字符串
router.push("home")

// 對(duì)象
router.push({ path: "home" })

// 命名的路由
router.push({ name: "user", params: { userId: 123 }})

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})

router.replace(location)

跟 router.push 很像，唯一的不同就是，它不會(huì)向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當(dāng)前的 history 記錄。

router.go(n)

這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。

// 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進(jìn) 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

命名路由

有時(shí)候，通過(guò)一個(gè)名稱來(lái)標(biāo)識(shí)一個(gè)路由顯得更方便一些，特別是在鏈接一個(gè)路由，或者是執(zhí)行一些跳轉(zhuǎn)的時(shí)候。你可以在創(chuàng)建 Router 實(shí)例的時(shí)候，在 routes 配置中給某個(gè)路由設(shè)置名稱。

const router = new VueRouter({
  routes: [
    {
      path: "/user/:userId",
      name: "user",
      component: User
    }
  ]
})

要鏈接到一個(gè)命名路由，可以給 router-link 的 to 屬性傳一個(gè)對(duì)象：

User

命名視圖

有時(shí)候想同時(shí)（同級(jí)）展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有 sidebar（側(cè)導(dǎo)航） 和 main（主內(nèi)容） 兩個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場(chǎng)了。你可以在界面中擁有多個(gè)多帶帶命名的視圖，而不是只有一個(gè)多帶帶的出口。如果 router-view 沒(méi)有設(shè)置名字，那么默認(rèn)為 default。  一個(gè)視圖使用一個(gè)組件渲染，因此對(duì)于同個(gè)路由，多個(gè)視圖就需要多個(gè)組件。確保正確使用 components 配置（帶上 s）：


  
var routes=[
            
    components:{
        a:{template:"首頁(yè),..."},
        b:{template:"內(nèi)容部分。。。。"},
    }


];

重定向別名

重定向的意思就是當(dāng)你訪問(wèn) a 的時(shí)候，url 會(huì)被替換為 b ，于是匹配路由 b
重定向也是通過(guò) routes 配置來(lái)完成，下面例子是從 /a 重定向到 /b：

var router=new VueRouter({
    routes:[
        {
            path:"/a",
            redirect:"/b"
        }
    ]
})

/a 的別名是 /b，意味著，當(dāng)用戶訪問(wèn) /b 時(shí)，URL 會(huì)保持為 /b，但是路由匹配則為 /a，就像用戶訪問(wèn) /a 一樣。

進(jìn)階 導(dǎo)航鉤子

vue-router 提供的導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時(shí)執(zhí)行鉤子：全局的, 單個(gè)路由獨(dú)享的, 或者組件級(jí)的。
你可以使用 router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子：

router .beforeEach((to,from,next)=>{
    //...
})

鉤子函數(shù)的三個(gè)參數(shù)：

to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

from: Route: 當(dāng)前導(dǎo)航正要離開(kāi)的路由

next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

ext(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認(rèn)的）。

next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動(dòng)或者瀏覽器后退按鈕），那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。

next("/") 或者 next({ path: " / " }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個(gè)新的導(dǎo)航。

做了一個(gè)簡(jiǎn)單的頁(yè)面，設(shè)定了一個(gè)登陸狀態(tài)，如果 isLogin 為false，那么點(diǎn)擊賬戶中心，則跳轉(zhuǎn)到登陸頁(yè)進(jìn)行登陸



    首頁(yè)
    關(guān)于我們
    登錄
    賬戶中心
    密碼管理

路由元信息

定義路由的時(shí)候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何訪問(wèn)這個(gè) meta 字段呢？

首先，我們稱呼 routes 配置中的每個(gè)路由對(duì)象為路由記錄。路由記錄可以是嵌套的，因此，當(dāng)一個(gè)路由匹配成功后，他可能匹配多個(gè)路由記錄。

例如，根據(jù)上面的路由配置，/foo/bar 這個(gè) URL 將會(huì)匹配父路由記錄以及子路由記錄。

一個(gè)路由匹配到的所有路由記錄會(huì)暴露為 $route 對(duì)象（還有在導(dǎo)航鉤子中的 route 對(duì)象）的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來(lái)檢查路由記錄中的 meta 字段。

下面例子展示在全局導(dǎo)航鉤子中檢查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要驗(yàn)證，檢查是否登錄
    // 如果不需要，則重定向到登錄頁(yè)面。
    if (!auth.loggedIn()) {
      next({
        path: "/login",
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})

GPU云服務(wù)器云服務(wù)器 Vue_Vue Vue vue3 學(xué)習(xí)筆記 (五)——vue3 _vue

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

church

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

穩(wěn)愛(ài)云：香港CN2 GIA，2核/2G/20M帶寬，月付34元，美國(guó)CERA聯(lián)通首月半價(jià)25元，簡(jiǎn)單

閱讀 3413·2021-10-11 11:06
Making An Indicator With Pure CSS

閱讀 2194·2019-08-29 11:10
[譯] 究竟什么是DOM？!

閱讀 1956·2019-08-26 18:18
mac 下安裝Nginx 和反向代理

閱讀 3262·2019-08-26 13:34
Promise 對(duì)象的理解

閱讀 1568·2019-08-23 16:45
js秒數(shù)轉(zhuǎn)換時(shí)分秒（hh:mm:ss）

閱讀 1046·2019-08-23 16:29
用Vue開(kāi)發(fā)仿旅游站webapp項(xiàng)目總結(jié) （上）

閱讀 2807·2019-08-23 13:11
PDF.js實(shí)現(xiàn)個(gè)性化PDF渲染（文本復(fù)制）

閱讀 3237·2019-08-23 12:58

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue路由

Hello App!

Hello App!

相關(guān)文章

**【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實(shí)現(xiàn) Vue 中的前端路由控制**

服務(wù)端預(yù)渲染之Nuxt(路由篇)

**從頭開(kāi)始學(xué)習(xí)vue-router**

**從頭開(kāi)始學(xué)習(xí)vue-router**

**從頭開(kāi)始學(xué)習(xí)vue-router**

**使用 webpack 插件自動(dòng)生成 vue 路由文件**

發(fā)表評(píng)論

0條評(píng)論

church

男|高級(jí)講師

TA的文章

穩(wěn)愛(ài)云：香港CN2 GIA，2核/2G/20M帶寬，月付34元，美國(guó)CERA聯(lián)通首月半價(jià)25元，簡(jiǎn)單

Making An Indicator With Pure CSS

[譯] 究竟什么是DOM？!

mac 下安裝Nginx 和反向代理

Promise 對(duì)象的理解

js秒數(shù)轉(zhuǎn)換時(shí)分秒（hh:mm:ss）

用Vue開(kāi)發(fā)仿旅游站webapp項(xiàng)目總結(jié) （上）

PDF.js實(shí)現(xiàn)個(gè)性化PDF渲染（文本復(fù)制）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Vue路由

Hello App!

Hello App!

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！