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