国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【轉(zhuǎn)】使用Vue-Router 2實(shí)現(xiàn)路由功能

seanlook / 2030人閱讀

摘要:請(qǐng)輸入代碼注意只適用于版本,下面我們是基于講的如何使用實(shí)現(xiàn)路由功能。一使用路由在中,需要明確安裝路由功能定義組件,這里使用從其他文件進(jìn)來(lái)定義路由創(chuàng)建實(shí)例,然后傳配置創(chuàng)建和掛載根實(shí)例。路由記錄就是配置數(shù)組中的對(duì)象副本還有在數(shù)組。

請(qǐng)輸入代碼注意:vue-router 2只適用于Vue2.x版本,下面我們是基于vue2.0講的如何使用vue-router 2實(shí)現(xiàn)路由功能。
推薦使用npm安裝。

npm install vue-router

一、使用路由
在main.js中,需要明確安裝路由功能:

import Vue from "vue"
import VueRouter from "vue-router"
import App from "./App.vue"
Vue.use(VueRouter)

1.定義組件,這里使用從其他文件import進(jìn)來(lái)

import index from "./components/index.vue"
import hello from "./components/hello.vue"

2.定義路由

const routes = [
    { path: "/index", component: index },
    { path: "/hello", component: hello },
]

3.創(chuàng)建 router 實(shí)例,然后傳 routes 配置

const router = new VueRouter({
  routes
})

4.創(chuàng)建和掛載根實(shí)例。通過(guò) router 配置參數(shù)注入路由,從而讓整個(gè)應(yīng)用都有路由功能

const app = new Vue({
    router,
    render: h => h(App)
}).$mount("#app")

經(jīng)過(guò)上面的配置之后呢,路由匹配到的組件將會(huì)渲染到App.vue里的
那么這個(gè)App.vue里應(yīng)該這樣寫:


index.html里呢要這樣寫:

    

這樣就會(huì)把渲染出來(lái)的頁(yè)面掛載到這個(gè)id為app的div里了。
二、重定向 redirect

const routes = [
    { path: "/", redirect: "/index"},     // 這樣進(jìn)/ 就會(huì)跳轉(zhuǎn)到/index
    { path: "/index", component: index }
]

三、嵌套路由

const routes = [
    { path: "/index", component: index,
        children: [
            { path: "info", component: info}
        ]
     }
]

通過(guò)/index/info就可以訪問(wèn)到info組件了
四、懶加載

const routes = [
    { path: "/index", component: resolve => require(["./index.vue"], resolve) },
    { path: "/hello", component: resolve => require(["./hello.vue"], resolve) },
]

通過(guò)懶加載就不會(huì)一次性把所有組件都加載進(jìn)來(lái),而是當(dāng)你訪問(wèn)到那個(gè)組件的時(shí)候才會(huì)加載那一個(gè)。對(duì)于組件比較多的應(yīng)用會(huì)提高首次加載速度。
五、
在vue-router 1中,使用的是
在vue-router 2中,使用了替換1版本中的a標(biāo)簽

Home

Home

Home

Home

Home

User

Register

六、路由信息對(duì)象
1.$route.path
字符串,對(duì)應(yīng)當(dāng)前路由的路徑,總是解析為絕對(duì)路徑,如 "/foo/bar"。

2.$route.params
一個(gè) key/value 對(duì)象,包含了 動(dòng)態(tài)片段 和 全匹配片段,如果沒有路由參數(shù),就是一個(gè)空對(duì)象。

3.$route.query
一個(gè) key/value 對(duì)象,表示 URL 查詢參數(shù)。例如,對(duì)于路徑 /foo?user=1,則有 $route.query.user == 1,如果沒有查詢參數(shù),則是個(gè)空對(duì)象。

4.$route.hash
當(dāng)前路由的 hash 值 (不帶 #) ,如果沒有 hash 值,則為空字符串。

5.$route.fullPath
完成解析后的 URL,包含查詢參數(shù)和 hash 的完整路徑。

6.$route.matched
一個(gè)數(shù)組,包含當(dāng)前路由的所有嵌套路徑片段的 路由記錄 。路由記錄就是 routes 配置數(shù)組中的對(duì)象副本(還有在 children 數(shù)組)。
綜合上述,一個(gè)包含重定向、嵌套路由、懶加載的main.js如下:

import Vue from "vue"
import VueRouter from "vue-router"
import App from "./App"
Vue.use(VueRouter)
const router = new VueRouter({
  routes:[
    { path: "/", redirect: "/index" },
    { path: "/index", component: resolve => require(["./components/index.vue"], resolve),
        children:[
            { path: "info", component: resolve => require(["./components/info.vue"], resolve) }
       ]
    },
    { path: "/hello", component: resolve => require(["./components/hello.vue"], resolve) },
  ]
})
const app = new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/88251.html

相關(guān)文章

  • 前端路由轉(zhuǎn)基本原理

    摘要:目前前端三杰都推介單頁(yè)面應(yīng)用開發(fā)模式,在路由切換時(shí)替換中最小修改的部分,來(lái)減少原先因?yàn)槎囗?yè)應(yīng)用的頁(yè)面跳轉(zhuǎn)帶來(lái)的巨量性能損耗。 showImg(https://segmentfault.com/img/bVbn1ZN?w=3069&h=2048); 目前前端三杰 Angular、React、Vue 都推介單頁(yè)面應(yīng)用 SPA 開發(fā)模式,在路由切換時(shí)替換 DOM Tree 中最小修改的部分 ...

    SillyMonkey 評(píng)論0 收藏0
  • vue-router 一些容易被忽略的知識(shí)點(diǎn)

    摘要:調(diào)用全局的守衛(wèi)。在被激活的組件里調(diào)用。用創(chuàng)建好的實(shí)例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。 本文適用于對(duì) Vue.js 和 vue-router 有一定程度了解的開發(fā)者除特殊說(shuō)明,vue-router 版本為 3.0.2 正文 路由 class 匹配 路由匹配后會(huì)給該標(biāo)簽添加 class 屬性值 .router-link-active,該功能在嵌套路由中十分方便 class 的實(shí)際屬性值可以通...

    chunquedong 評(píng)論0 收藏0
  • 一篇搞定vue-Router導(dǎo)航守衛(wèi)

    摘要:如果我們不掉用守衛(wèi)中的,迭代器的肯定并不會(huì)執(zhí)行,守衛(wèi)的迭代就停止了,守衛(wèi)堵塞并不會(huì)執(zhí)行完畢,也就不會(huì)由后面的更細(xì)路由操作了。 vue-router導(dǎo)航守衛(wèi) 在本期文章中,我將為大家梳理弄明白以下幾個(gè)事情, 1:導(dǎo)航守衛(wèi)的執(zhí)行順序是怎么樣的? 2:導(dǎo)航守衛(wèi)中的next的用處? 3:為什么afterEach守衛(wèi)沒有next? 4:beforeEach是否可以疊加? 5:路由跳轉(zhuǎn)經(jīng)歷了哪幾部...

    不知名網(wǎng)友 評(píng)論0 收藏0
  • 從頭開始學(xué)習(xí)vue-router

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

    tommego 評(píng)論0 收藏0
  • 從頭開始學(xué)習(xí)vue-router

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

    jhhfft 評(píng)論0 收藏0

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

0條評(píng)論

seanlook

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<