共計 5582 個字符,預計需要花費 14 分鐘才能閱讀完成。
本文丸趣 TV 小編為大家詳細介紹“Vue-Router 使用實例代碼分析”,內容詳細,步驟清晰,細節處理妥當,希望這篇“Vue-Router 使用實例代碼分析”文章能幫助大家解決疑惑,下面跟著丸趣 TV 小編的思路慢慢深入,一起來學習新知識吧。
Vue-Router 的最簡單使用
1. 先注冊路由
2. 將路由注冊到 VM 組件中
3. 定義組件
4. 頁面定義跳轉路徑
!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 匹配原則所以我們需要在原定義的路徑上加一個 #號
--
a href= #/login rel= external nofollow rel= external nofollow 登錄 /a
a href= #/register rel= external nofollow rel= external nofollow 注冊 /a
router-view /router-view
/div
/body
script
var login={
template: h2 登錄組件 /h2
}
var register={
template: h2 注冊組件 /h2
}
var routerObj = new VueRouter({
routes:[
// 此處的 component 只能使用組件對象,而不能使用注冊的模板的名稱
{path: /login ,component:login},
{path: /register ,component:register}
]
})
var vm = new Vue({
el: #app ,
data:{ },
methods:{
},
router:routerObj// 將路由規則對象注冊到 VM 實例上
})
/script
/html
使用 Router-Link 替代 a 標簽
這么做主要是為了去掉 a 標簽中的為了匹配 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 匹配原則所以我們需要在原定義的路徑上加一個 #號
--
!-- a href= #/login rel= external nofollow rel= external nofollow 登錄 /a
a href= #/register rel= external nofollow rel= external nofollow 注冊 /a --
router-link to= /login tag= span 登錄 /router-link
router-link to= /register 注冊 /router-link
router-view /router-view
/div
/body
script
var login={
template: h2 登錄組件 /h2
}
var register={
template: h2 注冊組件 /h2
}
var routerObj = new VueRouter({
routes:[
// 此處的 component 只能使用組件對象,而不能使用注冊的模板的名稱
{path: /login ,component:login},
{path: /register ,component:register}
]
})
var vm = new Vue({
el: #app ,
data:{ },
methods:{
},
router:routerObj// 將路由規則對象注冊到 VM 實例上
})
/script
/html
同時,我們還可以利用 tag 標簽來渲染 router-link 元素,router-link 默認渲染為 a 鏈接元素,使用 tag 標簽可以渲染其他元素,上述代碼中渲染為 span 元素了。無論渲染成什么元素,都依然與 a 連接一樣擁有跳轉的點擊事件
重定向技術以及默認路徑
默認路徑
我們可以使用默認路徑的方式指定根路徑, 只需要在上述路由定義的方式中加入默認路徑即可
var routerObj = new VueRouter({
routes:[
// 此處的 component 只能使用組件對象,而不能使用注冊的模板的名稱
{path: / ,component:login},
{path: /login ,component:login},
{path: /register ,component:register}
]
})
重定向方式指定默認路徑
同樣的使用一行代碼即可直接重定向到 login 路徑下,相比上述的默認路徑,此方式在 url 的展示上更為明顯
var routerObj = new VueRouter({
routes:[
// 此處的 component 只能使用組件對象,而不能使用注冊的模板的名稱
{path: / ,redirect: /login},
{path: /login ,component:login},
{path: /register ,component:register}
]
})
路由選中之后高亮設置
使用默認類設置為高亮
Vue 為 router-link 內置了一個連接點擊之后高亮的類 router-link-active, 即可以在自己的 style 中設置
style type= text/css
.router-link-active{
color: red;
font-weight: 800;
font-style: italic;
font-size: 30px;
}
/style
使用自定義類名
當我們想使用第三方定義的選中樣式,或者是自己想定義更為簡潔的樣式,可以使用 linkActiveClass 來定義,即在路由初始化時指定類名,在指定樣式時再自定義樣式
var routerObj = new VueRouter({
routes:[
// 此處的 component 只能使用組件對象,而不能使用注冊的模板的名稱
{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 方式傳遞參數
首先我們再設置路由鏈接是指定參數
router-link to= /login?id=10 name=zhao 登錄 /router-link
且可以指定并獲取多個參數,主要是再定義的組件對象內部使用 created 方法來獲得
var login={ template: h2 登錄組件 ---{{$route.query.id}}--{{$route.query.name}} /h2 ,
created(){ console.log(this.$route.query.id)
}
}
使用 params 方式傳遞參數
首先我們在路由定義的時候采用: 定義 params 參數
var routerObj = new VueRouter({
routes:[
// 此處的 component 只能使用組件對象,而不能使用注冊的模板的名稱
{path: /login/:id/:name ,component:login},
{path: /register ,component:register}
],
})
在實際使用過程中如何傳遞
router-link to= /login/10/zhao 登錄 /router-link
router-link to= /register 注冊 /router-link
router-view /router-view
在組件中使用
var login={ template: h2 登錄組件 ---{{$route.params.id}} /h2 ,
created(){ console.log(this.$route.params.id)
}
}
路由嵌套的實現
!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 注冊 /router-link
router-view /router-view
/div
/template
script
// 組件的模板對象
var account = {
template: #tmpl
}
var login = {
template: h4 登錄 /h4
}
var register = {
template: h4 注冊 /h4
}
var router = new VueRouter({
routes: [
{
path: /account ,
component: account,
// 使用 children 屬性,實現子路由,同時,子路由的 path 前面,不要帶 / ,否則永遠以根路徑開始請求,這樣不方便我們用戶去理解 URL 地址
children: [ { path: login , component: login },
{ path: register , component: register }
]
}
]
})
// 創建 Vue 實例,得到 ViewModel
var vm = new Vue({
el: #app ,
data: {},
methods: {},
router
});
/script
/body
/html
主要是由 children 屬性來實現的,上述代碼中由三個易錯點
1. 定義路由時,子路由沒有‘/
2. 在父組件中定義子組件要寫子組件的全路徑
3. 在父組件中定義組件同樣要加入 router-view 元素
案例:路由命名視圖實現經典布局
命名視圖在定義路由時使用 components 屬性 (注意不是 component) 來定義:
var routerObj = new VueRouter({
routes:[
// 此處的 component 只能使用組件對象,而不能使用注冊的模板的名稱
{path: / ,components:{
default:header,
left:leftBox,
main:mainBox
}},
]
})
幾個組件分別定義如下
var header={ template: h2 >我們在頁面上使用上述命名視圖時使用 router-view 的 name 屬性來定義
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 設置視圖組件的將采用 default 命名視圖
設置一下樣式
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 的優點
Vue 具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬 DOM、運行速度快等優勢,Vue 中頁面使用的是局部刷新,不用每次跳轉頁面都要請求所有數據和 dom,可以大大提升訪問速度和用戶體驗。
讀到這里,這篇“Vue-Router 使用實例代碼分析”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注丸趣 TV 行業資訊頻道。