vue路由的配置和頁(yè)面切換詳解
1.vue路由
可以實(shí)現(xiàn)單頁(yè)面應(yīng)用。
路由三要素：
vue路由通過(guò)hash的變化切換頁(yè)面(組件/div)
<router-link>導(dǎo)航
<router-view>存儲(chǔ)頁(yè)面(組件）的容器
src/router/index.js路由的配置
實(shí)現(xiàn)步驟：
2.router配置
對(duì)router文件夾下的index.js進(jìn)行配置
path：url
name：對(duì)應(yīng)的參數(shù)的模塊名稱
component:組件名
用組件時(shí)一定要注冊(cè)
{
path: '/product',
name: 'Product',
component: Product
}
3.實(shí)現(xiàn)傳參配置
配置
{
path: '/product/:id',
name: 'Product',
component: Product
}
切換: <router-link to="/product/666">產(chǎn)品666</router-link>
接收: {{$route.params.id}}
4 子頁(yè)面
配置
{
path: '/admin',
name: 'Admin',
component: Admin,
children:[
{path:"ucenter",component:Ucenter},
{path:"activity",component:Activity},
{path:"",redirect:"ucenter"}//重定向
]
},
重定向: {path:"",redirect:"ucenter"}
創(chuàng)建新的別名: alias:["/home","/main"]
切換: <router-link to="/admin/ucenter"></router-link>
5 頁(yè)面切換
跳轉(zhuǎn)：$router.go(-1)
后退：$router.back()
前進(jìn)： ```$router.forward()``
新加歷史記錄切換頁(yè)面：$router.push()
替換當(dāng)前頁(yè)面（不留歷史記錄）：$router.replace()
總結(jié)
到此這篇關(guān)于vue路由的配置和頁(yè)面切換的文章就介紹到這了,更多相關(guān)vue路由的配置和頁(yè)面切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令
這篇文章主要介紹了淺談Vue.js中如何實(shí)現(xiàn)自定義下拉菜單指令，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車小案例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本文給大家總結(jié)了Vue中操作dom元素的多種方法，每種方法結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友參考下吧2022-12-12
vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式
這篇文章主要給大家介紹了關(guān)于vue如何使用moment處理時(shí)間戳轉(zhuǎn)換成日期或時(shí)間格式的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
Vue3 style CSS 變量注入的實(shí)現(xiàn)
本文主要介紹了Vue3 style CSS 變量注入的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
MVVM是Model-View-ViewModel的縮寫，MVVM是一種設(shè)計(jì)思想，這篇文章主要介紹了Vue生命周期和MVVM框架,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
vue-cli3.0實(shí)現(xiàn)一個(gè)多頁(yè)面應(yīng)用的歷奇經(jīng)歷記錄總結(jié)
這篇文章主要介紹了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁(yè)面應(yīng)用的歷奇經(jīng)歷,總結(jié)分析了vue-cli3.0實(shí)現(xiàn)一個(gè)多頁(yè)面應(yīng)用遇到的問(wèn)題與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間淺析
這篇文章主要給大家介紹了關(guān)于vue如何動(dòng)態(tài)實(shí)時(shí)的顯示時(shí)間，以及vue時(shí)間戳 獲取本地時(shí)間實(shí)時(shí)更新的相關(guān)資料，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vue axios庫(kù)避免重復(fù)發(fā)送請(qǐng)求的示例介紹
Axios是一個(gè)基于promise的HTTP庫(kù)，可以用在瀏覽器和node.js中。axios是目前最優(yōu)秀的HTTP請(qǐng)求庫(kù)之一,我們封裝axios請(qǐng)求也是為了讓代碼看的更加清晰,后期好維護(hù)2023-02-02