Vue Router的介紹與引入功能詳解
在這里是記錄我引入Vue Router的全過(guò)程，引入方面也最好先看官方文檔
一.介紹
Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉。功能包括：
- 嵌套路由映射
- 動(dòng)態(tài)路由選擇
- 模塊化、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 展示由 Vue.js 的過(guò)渡系統(tǒng)提供的過(guò)渡效果
- 細(xì)致的導(dǎo)航控制
- 自動(dòng)激活 CSS 類的鏈接
- HTML5 history 模式或 hash 模式
- 可定制的滾動(dòng)行為
- URL 的正確編碼
說(shuō)大白話點(diǎn)就是它幫助你根據(jù)不同的 url 來(lái)展示不同的頁(yè)面（組件），不用自己寫 if / else路由配置影響整個(gè)項(xiàng)目，所以建議單獨(dú)用config目錄、單獨(dú)的配置文件去集中定義和管理。
二.實(shí)操
安裝：
npm install vue-router@4
yarn add vue-router@4
JavaScript：
main.ts：
import * as VueRouter from 'vue-router';
import routes from "./config/router";
// 3. 創(chuàng)建路由實(shí)例并傳遞 `routes` 配置
// 你可以在這里輸入更多的配置，但我們?cè)谶@里
// 暫時(shí)保持簡(jiǎn)單
const router = VueRouter.createRouter({
// 4. 內(nèi)部提供了 history 模式的實(shí)現(xiàn)。為了簡(jiǎn)單起見(jiàn)，我們?cè)谶@里使用 hash 模式。
history: VueRouter.createWebHashHistory(),
routes, // `routes: routes` 的縮寫
})router文件夾下的router.ts內(nèi)容：
// 1. 定義路由組件.
// 也可以從其他文件導(dǎo)入
import Index from '../pages/index.vue';
import Team from '../pages/Team.vue';
import User from '../pages/User.vue';
// 2. 定義一些路由
// 每個(gè)路由都需要映射到一個(gè)組件。
// 我們后面再討論嵌套路由。
const routes = [
{ path: '/', component: Index },
{ path: '/team', component: Team },
{ path: '/user', component: User },
]
export default routes;到此這篇關(guān)于Vue Router的介紹與引入的文章就介紹到這了,更多相關(guān)Vue Router引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue分頁(yè)插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
解決vue-router在同一個(gè)路由下切換,取不到變化的路由參數(shù)問(wèn)題
今天小編就為大家分享一篇解決vue-router在同一個(gè)路由下切換,取不到變化的路由參數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了前端必知必會(huì)之Vue?$emit()方法的相關(guān)資料,Vue.js中的$emit()方法用于在子組件中創(chuàng)建自定義事件,并在父組件中捕獲這些事件,這在需要從子組件向父組件傳遞信息的大型項(xiàng)目中非常有用,需要的朋友可以參考下2025-02-02
Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn)
監(jiān)聽(tīng)事件是我們?cè)谑褂胿ue.js的時(shí)候經(jīng)常使用的一個(gè)功能，下面這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之通過(guò)監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)動(dòng)態(tài)錨點(diǎn) 的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
Vue3實(shí)現(xiàn)動(dòng)態(tài)高度的虛擬滾動(dòng)列表的示例代碼
虛擬滾動(dòng)列表是一種優(yōu)化長(zhǎng)列表渲染性能的技術(shù),通過(guò)只渲染可視區(qū)域內(nèi)的列表項(xiàng),減少DOM的渲染數(shù)量,本文就來(lái)介紹一下Vue3實(shí)現(xiàn)動(dòng)態(tài)高度的虛擬滾動(dòng)列表的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2025-01-01
Vue中Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決方案
這篇文章主要介紹了Vue中Object.assign清空數(shù)據(jù)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)方式及傳參方式
這篇文章主要介紹了Vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)方式及傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了使用table做成樹形結(jié)構(gòu)的table問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue實(shí)現(xiàn)仿淘寶結(jié)賬頁(yè)面實(shí)例代碼
本文是小編給大家分享的vue實(shí)現(xiàn)仿淘寶結(jié)賬頁(yè)面實(shí)例代碼，主要功能是仿照淘寶頁(yè)面的結(jié)算購(gòu)物車商品時(shí)自動(dòng)算出合計(jì)價(jià)格的頁(yè)面，具體實(shí)例代碼大家參考下本文2017-11-11