Vue Router的介紹與引入功能詳解
更新時(shí)間：2024年01月02日 16:14:31 作者：城堡修煉者
Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構(gòu)建單頁(yè)應(yīng)用變得輕而易舉,這篇文章主要介紹了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)單起見，我們?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-cli3多頁(yè)面開發(fā)apicloud應(yīng)用的教程詳解
這篇文章主要介紹了基于vue-cli3多頁(yè)面開發(fā)apicloud應(yīng)用，本文采用vue-cli+APIcloud的方式寫解決以上痛點(diǎn)，開發(fā)靈活，并且打包之后體積更小速度更快,需要的朋友可以參考下2019-06-06
vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
這篇文章主要介紹了vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
Vue實(shí)現(xiàn)無(wú)限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法
最近在開發(fā)中遇到了一個(gè)新需求：列表輪播滾動(dòng),實(shí)現(xiàn)方式也有很多,比如使用第三方插件,但是由于不想依賴第三方插件,想自己實(shí)現(xiàn),于是我開始了嘗試,但是在這個(gè)過(guò)程中遇到了動(dòng)態(tài)綁定style樣式不生效,所以本文介紹了Vue實(shí)現(xiàn)無(wú)限輪播效果時(shí)動(dòng)態(tài)綁定style失效的解決方法2024-08-08
解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no
這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no-mutating-props)的相關(guān)資料,文中通過(guò)代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue與iframe之間的交互方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue axios整合使用全攻略,需要的朋友可以參考下2018-05-05
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制2024-10-10
vue進(jìn)行post和get請(qǐng)求實(shí)例講解
這篇文章主要介紹了vue進(jìn)行post和get請(qǐng)求實(shí)例講解，違章圍繞post和get請(qǐng)求的相關(guān)資料展開詳細(xì)內(nèi)容，具有一的的參考價(jià)值，需要的小伙伴可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue如何通過(guò)配置代理來(lái)解決跨域請(qǐng)求的問(wèn)題，文中的示例代碼講解詳細(xì)，對(duì)我們深入學(xué)習(xí)vue有一定的幫助，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
這篇文章主要為大家介紹了vue頁(yè)面狀態(tài)持久化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12