vue路由的配置和頁面切換詳解
1.vue路由
可以實(shí)現(xiàn)單頁面應(yīng)用。
路由三要素：
vue路由通過hash的變化切換頁面(組件/div)
<router-link>導(dǎo)航
<router-view>存儲頁面(組件）的容器
src/router/index.js路由的配置
實(shí)現(xiàn)步驟：
2.router配置
對router文件夾下的index.js進(jìn)行配置
path：url
name：對應(yīng)的參數(shù)的模塊名稱
component:組件名
用組件時一定要注冊
{
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 子頁面
配置
{
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 頁面切換
跳轉(zhuǎn)：$router.go(-1)
后退：$router.back()
前進(jìn)： ```$router.forward()``
新加歷史記錄切換頁面：$router.push()
替換當(dāng)前頁面（不留歷史記錄）：$router.replace()
總結(jié)
到此這篇關(guān)于vue路由的配置和頁面切換的文章就介紹到這了,更多相關(guān)vue路由的配置和頁面切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue中路由使用this.$router.go(-1)返回兩次問題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家介紹了實(shí)時通信Socket?io的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
在本篇文章中我們給大家總結(jié)了關(guān)于編寫vue組件的方法知識點(diǎn)，有此需要的讀者們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要介紹了vue中使用render封裝一個select組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue生命周期的探索，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue axios數(shù)據(jù)請求及vue中使用axios的方法
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請求及vue中使用axios的方法,需要的朋友可以參考下2018-09-09
下面小編就為大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2018-04-04
vue-resource攔截器設(shè)置頭信息的實(shí)例
下面小編就為大家?guī)硪黄獀ue-resource攔截器設(shè)置頭信息的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vuex?是一個專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01