您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Vue-Router使用實(shí)例代碼分析”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Vue-Router使用實(shí)例代碼分析”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
Vue-Router的最簡(jiǎn)單使用
1.先注冊(cè)路由
2.將路由注冊(cè)到VM組件中
3.定義組件
4.頁(yè)面定義跳轉(zhuǎn)路徑
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <!-- 由于Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個(gè)#號(hào) --> <a href="#/login" rel="external nofollow" rel="external nofollow" >登錄</a> <a href="#/register" rel="external nofollow" rel="external nofollow" >注冊(cè)</a> <router-view></router-view> </div> </body> <script> var login={ template:'<h2>登錄組件</h2>' } var register={ template:'<h2>注冊(cè)組件</h2>' } var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對(duì)象,而不能使用注冊(cè)的模板的名稱(chēng) {path:"/login",component:login}, {path:"/register",component:register} ] }) var vm = new Vue({ el:'#app', data:{ }, methods:{ }, router:routerObj//將路由規(guī)則對(duì)象注冊(cè)到VM實(shí)例上 }) </script> </html>
使用Router-Link替代a標(biāo)簽
這么做主要是為了去掉a標(biāo)簽中的為了匹配hash地址的“#”,如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue.min.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <!-- 由于Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個(gè)#號(hào) --> <!-- <a href="#/login" rel="external nofollow" rel="external nofollow" >登錄</a> <a href="#/register" rel="external nofollow" rel="external nofollow" >注冊(cè)</a>--> <router-link to="/login" tag="span">登錄</router-link> <router-link to="/register">注冊(cè)</router-link> <router-view></router-view> </div> </body> <script> var login={ template:'<h2>登錄組件</h2>' } var register={ template:'<h2>注冊(cè)組件</h2>' } var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對(duì)象,而不能使用注冊(cè)的模板的名稱(chēng) {path:"/login",component:login}, {path:"/register",component:register} ] }) var vm = new Vue({ el:'#app', data:{ }, methods:{ }, router:routerObj//將路由規(guī)則對(duì)象注冊(cè)到VM實(shí)例上 }) </script> </html>
同時(shí),我們還可以利用tag標(biāo)簽來(lái)渲染router-link元素,router-link默認(rèn)渲染為a鏈接元素,使用tag標(biāo)簽可以渲染其他元素,上述代碼中渲染為span元素了。無(wú)論渲染成什么元素,都依然與a連接一樣擁有跳轉(zhuǎn)的點(diǎn)擊事件
重定向技術(shù)以及默認(rèn)路徑
默認(rèn)路徑
我們可以使用默認(rèn)路徑的方式指定根路徑,只需要在上述路由定義的方式中加入默認(rèn)路徑即可
var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對(duì)象,而不能使用注冊(cè)的模板的名稱(chēng) {path:"/",component:login}, {path:"/login",component:login}, {path:"/register",component:register} ] })
重定向方式指定默認(rèn)路徑
同樣的使用一行代碼即可直接重定向到login路徑下,相比上述的默認(rèn)路徑,此方式在url的展示上更為明顯
var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對(duì)象,而不能使用注冊(cè)的模板的名稱(chēng) {path:"/",redirect:"/login"}, {path:"/login",component:login}, {path:"/register",component:register} ] })
路由選中之后高亮設(shè)置
使用默認(rèn)類(lèi)設(shè)置為高亮
Vue為router-link內(nèi)置了一個(gè)連接點(diǎn)擊之后高亮的類(lèi)router-link-active,即可以在自己的style中設(shè)置
<style type="text/css"> .router-link-active{ color: red; font-weight: 800; font-style: italic; font-size: 30px; } </style>
使用自定義類(lèi)名
當(dāng)我們想使用第三方定義的選中樣式,或者是自己想定義更為簡(jiǎn)潔的樣式,可以使用linkActiveClass來(lái)定義,即在路由初始化時(shí)指定類(lèi)名,在指定樣式時(shí)再自定義樣式
var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對(duì)象,而不能使用注冊(cè)的模板的名稱(chēng) {path:"/",redirect:"/login"}, {path:"/login",component:login}, {path:"/register",component:register} ], linkActiveClass:'myactive' })
指定樣式
<style type="text/css"> .router-link-active,.myactive{ color: red; font-weight: 800; font-style: italic; font-size: 30px; } </style>
路由傳參
使用query方式傳遞參數(shù)
首先我們?cè)僭O(shè)置路由鏈接是指定參數(shù)
<router-link to="/login?id=10&name=zhao">登錄</router-link>
且可以指定并獲取多個(gè)參數(shù),主要是再定義的組件對(duì)象內(nèi)部使用created方法來(lái)獲得
var login={ template:'<h2>登錄組件---{{$route.query.id}}--{{$route.query.name}}</h2>', created(){ console.log(this.$route.query.id) } }
使用params方式傳遞參數(shù)
首先我們?cè)诼酚啥x的時(shí)候采用:定義params參數(shù)
var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對(duì)象,而不能使用注冊(cè)的模板的名稱(chēng) {path:"/login/:id/:name",component:login}, {path:"/register",component:register} ], })
在實(shí)際使用過(guò)程中如何傳遞
<router-link to="/login/10/zhao">登錄</router-link> <router-link to="/register">注冊(cè)</router-link> <router-view></router-view>
在組件中使用
var login={ template:'<h2>登錄組件---{{$route.params.id}}</h2>', created(){ console.log(this.$route.params.id) } }
路由嵌套的實(shí)現(xiàn)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="lib/vue-2.4.0.js"></script> <script src="lib/vue-router-3.0.1.js"></script> <style type="text/css"> </style> </head> <body> <div id="app"> <router-link to="/account">Account</router-link> <router-view></router-view> </div> <template id="tmpl"> <div> <h2>這是 Account 組件</h2> <router-link to="/account/login">登錄</router-link> <router-link to="/account/register">注冊(cè)</router-link> <router-view></router-view> </div> </template> <script> // 組件的模板對(duì)象 var account = { template: '#tmpl' } var login = { template: '<h4>登錄</h4>' } var register = { template: '<h4>注冊(cè)</h4>' } var router = new VueRouter({ routes: [ { path: '/account', component: account, // 使用 children 屬性,實(shí)現(xiàn)子路由,同時(shí),子路由的 path 前面,不要帶 / ,否則永遠(yuǎn)以根路徑開(kāi)始請(qǐng)求,這樣不方便我們用戶(hù)去理解URL地址 children: [ { path: 'login', component: login }, { path: 'register', component: register } ] } } ] }) // 創(chuàng)建 Vue 實(shí)例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, router }); </script> </body> </html>
主要是由children屬性來(lái)實(shí)現(xiàn)的,上述代碼中由三個(gè)易錯(cuò)點(diǎn)
1.定義路由時(shí),子路由沒(méi)有‘/'
2.在父組件中定義子組件要寫(xiě)子組件的全路徑
3.在父組件中定義組件同樣要加入router-view元素
案例:路由命名視圖實(shí)現(xiàn)經(jīng)典布局
命名視圖在定義路由時(shí)使用components屬性(注意不是component)來(lái)定義:
var routerObj = new VueRouter({ routes:[ //此處的component只能使用組件對(duì)象,而不能使用注冊(cè)的模板的名稱(chēng) {path:"/",components:{ default:header, left:leftBox, main:mainBox }}, ] })
幾個(gè)組件分別定義如下
var header={ template:'<h2 class="header">頭部區(qū)域</h2>' } var leftBox={ template:'<h2 class=left>左部菜單區(qū)域</h2>' } var mainBox={ template:'<h2 class="main">主體內(nèi)容區(qū)域</h2>' }
我們?cè)陧?yè)面上使用上述命名視圖時(shí)使用router-view的name屬性來(lái)定義
<div id="app"> <router-view></router-view> <div id="container"> <router-view name="left"></router-view> <router-view name="main"></router-view> </div> </div>
未使用命名屬t性name設(shè)置視圖組件的將采用default命名視圖
設(shè)置一下樣式
<style type="text/css"> html,body{ margin: 0; padding: 0; } h2{ margin: 0; padding: 0; font-size: 16px; } .header{ background-color: #6495ED; height: 200px; } #container{ display: flex; height: 600px; } .left{ flex: 2; background-color: #0000FF; } .main{ flex: 8; background-color: #8A2BE2; } </style>
Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì),Vue中頁(yè)面使用的是局部刷新,不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問(wèn)速度和用戶(hù)體驗(yàn)。
讀到這里,這篇“Vue-Router使用實(shí)例代碼分析”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。