vue路由介紹

2. 前端路由的使用

前端路由：由前端實現以上功能，前端只存在d單頁面首頁index.htm

規定url格式，獲取url內容；

使用場景：共用頁面，如商品詳情，只是商品的id不同

模式匹配路徑

$route.params

/user/:username

/user/enent

/user/:username/post/:post_id

/user/event/post/123

例項:

1.建立vue頁面

>

>
這是商品列表頁面
>
}p>
>
}p>
div>
template
>
>
export
default
script
>
scoped
>
style
>

import goodslist from

'@/views/goodslist'
vue.
use(router)
export
default
newrouter(]
})

4.輸出結果

vue-router是對history物件的封裝;

位址中的#是指定路由模式，可以修改為history

路由之中巢狀路由；通過巢狀路由實現不同頁面之間的切換

>

這是商品的 /標題 子元件
div>

>

"/goods/title"
>
顯示商品標題router-link
>
"/goods/img"
>
顯示商品router-link
>
div>
>
>
router-view
>
div>

children:[,

通過js來實現頁面的跳轉

例子：

1.商品列表頁面

>

>
>
"/cart"
>
跳轉到購物車router-link
>
>
@click
="jumpstr"
>
跳轉到購物車頁面（字串）button
>
li>
>
@click
="jumpobj"
>
跳轉到購物車頁面（物件）button
>
li>
>
@click
="jumpque"
>
跳轉到購物車頁面（傳參）button
>
li>
>
@click
="jumpgo"
>
前進button
>
li>
>
@click
="jumpback"
>
後退button
>
li>
div>
div>
template
>
>
export
default
,jumpobj()
)},jumpque()
})},
jumpgo()
,jumpback()
}}script
>

注意這裡是用的route而不是router

並且獲取引數是用query而不是params和動態路由傳參有區別

>

這是購物車頁面
>
}p>
div>

命名路由例子

1.為路由命名

>

v-bind:to
=" }"
>
跳轉到購物車頁面（命名路由）
router-link
>
div>

//命名檢視

components:
,

>

>
="main"
/>
="left" name=
"title"
>
<
/router-view>
="right" name=
"img"
>
<
/router-view>
<
/div>

vue路由傳參介紹

vue有兩種傳參方式 1 query vm.router.push 2 param vm.router.push 這兩種方式都可以進行路由的傳參，但是在頁面進行重新整理的時候，params傳參的資料會消失，而query的引數不會因為頁面重新整理而消失，query傳的時候只能穿字串，而params傳參...

Vue路由簡單介紹（一）

使用npm命令 npm install vue router如果在乙個模組化工程中使用它，必須要通過 vue.use 明確地安裝路由功能 import vue from vue import vuerouter from vue router vue.use vuerouter 如果使用全域性的 s...

vue路由介紹及使用

vue router 官方提供的vue路由外掛程式 使用流程 const routes path 路徑 component 元件名,建立路由 const router new vuerouter 匯出 export default router 使用路由 路由容器，基於slot的封裝 二級路由 二級...