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ù)的模塊名稱(chēng)
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)文章
在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
實(shí)時(shí)通信Socket?io的使用示例詳解
這篇文章主要為大家介紹了實(shí)時(shí)通信Socket?io的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
在本篇文章中我們給大家總結(jié)了關(guān)于編寫(xiě)vue組件的方法知識(shí)點(diǎn)，有此需要的讀者們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了vue中使用render封裝一個(gè)select組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue生命周期的探索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請(qǐng)求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09
下面小編就為大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04
vue-resource攔截器設(shè)置頭信息的實(shí)例
下面小編就為大家?guī)?lái)一篇vue-resource攔截器設(shè)置頭信息的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
Vuex?是一個(gè)專(zhuān)為?Vue.js?應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01