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)文章
這篇文章主要介紹了vue?事件獲取當(dāng)前組件的屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
使用watch監(jiān)聽(tīng)路由變化和watch監(jiān)聽(tīng)對(duì)象的實(shí)例
下面小編就為大家分享一篇使用watch監(jiān)聽(tīng)路由變化和watch監(jiān)聽(tīng)對(duì)象的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題
下面小編就為大家分享一篇詳談vue+webpack解決css引用圖片打包后找不到資源文件的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了如何設(shè)置Vue全局公共方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
基于vue開(kāi)發(fā)的在線(xiàn)付費(fèi)課程應(yīng)用過(guò)程
這篇文章主要介紹了基于vue開(kāi)發(fā)的在線(xiàn)付費(fèi)課程應(yīng)用過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
iview table render集成switch開(kāi)關(guān)的實(shí)例
下面小編就為大家分享一篇iview table render集成switch開(kāi)關(guān)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue開(kāi)發(fā)簡(jiǎn)單上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
今天小編就為大家分享一篇vue視頻播放暫停代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue+antDesign實(shí)現(xiàn)樹(shù)形數(shù)據(jù)展示及勾選聯(lián)動(dòng)
本文主要介紹了vue+antDesign實(shí)現(xiàn)樹(shù)形數(shù)據(jù)展示及勾選聯(lián)動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02