路由

理解: 一個路由(route)就是一組映射關(guān)系(key - value),多個路由需要路由器(router)進(jìn)行管理肥橙。

前端路由:key是路徑魄宏,value是組件。

1.基本使用

安裝vue-router存筏,命令:npm i vue-router

應(yīng)用插件:Vue.use(VueRouter)

編寫router配置項:

//引入VueRouter

importVueRouterfrom'vue-router'

//引入Luyou 組件

importAboutfrom'../components/About'

importHomefrom'../components/Home'

//創(chuàng)建router實(shí)例對象宠互,去管理一組一組的路由規(guī)則

constrouter=newVueRouter({

routes:[

    {

        path:'/about',

        component:About

    },

    {

        path:'/home',

        component:Home

    }

]

})

//暴露router

exportdefaultrouter

實(shí)現(xiàn)切換(active-class可配置高亮樣式)

<router-linkactive-class="active"to="/about">About</router-link>

指定展示位置

<router-view></router-view>

2.幾個注意點(diǎn)

路由組件通常存放在pages文件夾,一般組件通常存放在components文件夾椭坚。

通過切換予跌,“隱藏”了的路由組件,默認(rèn)是被銷毀掉的善茎,需要的時候再去掛載券册。

每個組件都有自己的$route屬性,里面存儲著自己的路由信息。

整個應(yīng)用只有一個router烁焙,可以通過組件的$router屬性獲取到航邢。

3.多級路由(多級路由)

配置路由規(guī)則,使用children配置項:

routes:[

{

    path:'/about',

    component:About,

},

{

    path:'/home',

    component:Home,

    children:[//通過children配置子級路由

        {

            path:'news',//此處一定不要寫:/news

            component:News

        },

        {

            path:'message',//此處一定不要寫:/message

            component:Message

        }

    ]

}

]

跳轉(zhuǎn)(要寫完整路徑):

<router-linkto="/home/news">News</router-link>

4.路由的query參數(shù)

傳遞參數(shù)

<router-link:to="/home/message/detail?id=666&title=你好">跳轉(zhuǎn)</router-link>

<router-link

:to="{

    path:'/home/message/detail',

    query:{

    id:666,

title:'你好'

    }

}"

跳轉(zhuǎn)</router-link>

接收參數(shù):

$route.query.id

$route.query.title

5.命名路由

作用:可以簡化路由的跳轉(zhuǎn)骄蝇。

如何使用

給路由命名:

{

path:'/demo',

component:Demo,

children:[

    {

        path:'test',

        component:Test,

        children:[

            {

name:'hello'//給路由命名

                path:'welcome',

                component:Hello,

            }

        ]

    }

]

}

簡化跳轉(zhuǎn):

<router-linkto="/demo/test/welcome">跳轉(zhuǎn)</router-link>

<router-link:to="{name:'hello'}">跳轉(zhuǎn)</router-link>

<router-link

:to="{

    name:'hello',

    query:{

    id:666,

title:'你好'

    }

}"

跳轉(zhuǎn)</router-link>

6.路由的params參數(shù)

配置路由膳殷,聲明接收params參數(shù)

{

path:'/home',

component:Home,

children:[

    {

        path:'news',

        component:News

    },

    {

        component:Message,

        children:[

            {

                name:'xiangqing',

                path:'detail/:id/:title',//使用占位符聲明接收params參數(shù)

                component:Detail

            }

        ]

    }

]

}

傳遞參數(shù)

<router-link:to="/home/message/detail/666/你好">跳轉(zhuǎn)</router-link>

<router-link

:to="{

    name:'xiangqing',

    params:{

    id:666,

title:'你好'

    }

}"

跳轉(zhuǎn)</router-link>

特別注意:路由攜帶params參數(shù)時,若使用to的對象寫法九火,則不能使用path配置項赚窃,必須使用name配置!

接收參數(shù):

$route.params.id

$route.params.title

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末岔激,一起剝皮案震驚了整個濱河市考榨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鹦倚,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件冀惭,死亡現(xiàn)場離奇詭異震叙,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)散休,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進(jìn)店門媒楼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人戚丸,你說我怎么就攤上這事划址。” “怎么了限府?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵夺颤,是天一觀的道長。 經(jīng)常有香客問我胁勺,道長世澜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任署穗,我火速辦了婚禮寥裂,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘案疲。我一直安慰自己封恰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布褐啡。 她就那樣靜靜地躺著诺舔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上混萝,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天遗遵,我揣著相機(jī)與錄音,去河邊找鬼逸嘀。 笑死车要,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的崭倘。 我是一名探鬼主播翼岁,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼司光!你這毒婦竟也來了琅坡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤残家,失蹤者是張志新(化名)和其女友劉穎榆俺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坞淮,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡茴晋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了回窘。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诺擅。...
    茶點(diǎn)故事閱讀 39,953評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖啡直,靈堂內(nèi)的尸體忽然破棺而出烁涌,到底是詐尸還是另有隱情,我是刑警寧澤酒觅,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布撮执,位于F島的核電站,受9級特大地震影響舷丹,放射性物質(zhì)發(fā)生泄漏二打。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一掂榔、第九天 我趴在偏房一處隱蔽的房頂上張望继效。 院中可真熱鬧,春花似錦装获、人聲如沸瑞信。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽凡简。三九已至逼友,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秤涩,已是汗流浹背帜乞。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留筐眷,地道東北人黎烈。 一個月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像匀谣,于是被迫代替她去往敵國和親照棋。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 一武翎、相關(guān)理解 1.路由就是一組key-value的對應(yīng)關(guān)系 多個路由烈炭,需要經(jīng)過路由器的管理 一個路...
    丁曉杰_2021強(qiáng)化班閱讀 266評論 0 0
  • Vue Router 是Vue.js[http://cn.vuejs.org/]官方的路由管理器。它和 Vue.j...
    SY閱讀 584評論 0 0
  • SPA單頁應(yīng)用 傳統(tǒng)的項目大多使用多頁面結(jié)構(gòu)膏执,需要切換內(nèi)容的時候我們往往會進(jìn)行單個html文件的跳轉(zhuǎn),這個時候受網(wǎng)...
    視覺派Pie閱讀 11,843評論 1 55
  • 在傳統(tǒng)的 Web 開發(fā)過程中露久,當(dāng)你需要實(shí)現(xiàn)多個站內(nèi)頁面時,以前你需要寫很多個 html 頁面欺栗,然后通過 a 標(biāo)簽來...
    硅谷干貨閱讀 2,211評論 0 1
  • 一毫痕、什么是路由? 路由是通過互聯(lián)的網(wǎng)絡(luò)把信息從源地址傳輸?shù)侥康牡刂返幕顒?路由中有個非常重要的概念叫路由表迟几,本質(zhì)上...
    接下來的冬天閱讀 410評論 0 0