溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章運用簡單易懂的例子給大家介紹在vue中如何配置頁面切換和路由，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
1.vue路由
可以實現單頁面應用。
路由三要素：
vue路由通過hash的變化切換頁面(組件/div)
<router-link>導航
<router-view>存儲頁面(組件）的容器
src/router/index.js路由的配置
實現步驟：
2.router配置
對router文件夾下的index.js進行配置
path：url
name：對應的參數的模塊名稱
component:組件名
用組件時一定要注冊
{
path: '/product',
name: 'Product',
component: Product
}3.實現傳參配置
配置
{
path: '/product/:id',
name: 'Product',
component: Product
}切換: <router-link to="/product/666">產品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"}
創建新的別名: alias:["/home","/main"]
切換: <router-link to="/admin/ucenter"></router-link>
5 頁面切換
跳轉：$router.go(-1)
后退：$router.back()
前進： ```$router.forward()``
新加歷史記錄切換頁面：$router.push()
替換當前頁面（不留歷史記錄）：$router.replace()
關于在vue中如何配置頁面切換和路由就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
