vue-router 起步步驟詳解
1.在main.js中導(dǎo)入vue-router和組件
import VueRouter from 'vue-router'; // 導(dǎo)入vue-router并將它命名為VueRouter import goods from './components/goods/goods'; // 引入組件 import seller from './components/seller/seller';
2.為組件設(shè)置URL,通過(guò)url可以動(dòng)態(tài)的加載組件
const urls = [
{ path: '/goods', component: goods },
{ path: '/rating', component: rating },
{ path: '*', redirect: '/goods' } //無(wú)效路徑重點(diǎn)向到'/goods'
];//定義一個(gè)常量來(lái)將url和組件綁定起來(lái)
3.配置vue-router對(duì)象并掛載
const router = new VueRouter( //新建一個(gè)vue-router對(duì)象
{
routes: urls 將組件 (components) 映射到路由 (routes)，
}
);
new Vue({
el: '#app',
router, //注冊(cè)你新建的vue-router對(duì)象
render: h => h(App)
});
4.配置連接的出口,實(shí)現(xiàn)動(dòng)態(tài)的加載組件
<router-view></router-view> //通過(guò)模板中放置元素來(lái)確定vue-router渲染組件的位置
現(xiàn)在,可以通過(guò)url動(dòng)態(tài)加載我們的組件
5.將連接入口,掛載到網(wǎng)頁(yè)上
<router-link to="/goods">商品</router-link> //本質(zhì)上是個(gè)a標(biāo)簽,to關(guān)聯(lián)了跳轉(zhuǎn)的url
可以通過(guò)點(diǎn)擊商品和評(píng)論完成頁(yè)面局部的刷新
步驟總結(jié)
1.在main.js中導(dǎo)入vue-router和自定義的組件
2.常量定義url和組件的關(guān)聯(lián)
3.創(chuàng)建vue-router對(duì)象并導(dǎo)入組件關(guān)系,并注冊(cè)
4.在模板中定義渲染的出口 <router-view></router-view> 和入口<router-link to=" ">商品</router-link>
官方起步文檔:https://router.vuejs.org/zh/guide/#html
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3?封裝?Element?Plus?Menu?無(wú)限級(jí)菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對(duì)?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實(shí)現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動(dòng)態(tài)渲染菜單，對(duì)Vue3?無(wú)限級(jí)菜單組件相關(guān)知識(shí)感興趣的朋友一起看看吧2022-09-09
Vue中的ref和reactive是兩種不同的數(shù)據(jù)響應(yīng)式管理方式,通過(guò)ref創(chuàng)建的響應(yīng)式對(duì)象在訪問(wèn)和修改時(shí)會(huì)自動(dòng)觸發(fā)重新渲染,本文給大家介紹vue中的ref/reactive區(qū)別及原理解析,感興趣的朋友跟隨小編一起看看吧2024-02-02
vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
vue實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)容器大小
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖動(dòng)調(diào)整左右兩側(cè)容器大小，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了如何區(qū)分vue中的v-show 與 v-if ，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-09-09
vue動(dòng)態(tài)添加背景圖簡(jiǎn)單示例
這篇文章主要給大家介紹了關(guān)于vue動(dòng)態(tài)添加背景圖的相關(guān)資料,在一些場(chǎng)景下我們需要使用戶(hù)可以進(jìn)行自定義背景圖片,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問(wèn)題的解決方法
最近在學(xué)習(xí)Vue的時(shí)候,正好學(xué)到了引入echarts圖表做數(shù)據(jù)統(tǒng)計(jì)的內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于Vue使用Echarts圖表多次初始化報(bào)錯(cuò)問(wèn)題的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vue組件和iframe頁(yè)面的相互傳參問(wèn)題及解決
這篇文章主要介紹了vue組件和iframe頁(yè)面的相互傳參問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue+elementui實(shí)現(xiàn)拖住滑塊拼圖驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue中每個(gè)組件都是隔離的,包括父組件和子組件,各組件之間需要數(shù)據(jù)通信,就涉及到了組件傳值,本文給大家介紹vue中組件間多種傳值方式案例,感興趣的朋友跟隨小編一起看看吧2024-03-03