Vue Router的介紹與引入功能詳解

更新時間：2024年01月02日 16:14:31 作者：城堡修煉者

Vue Router 是?Vue.js?的官方路由,它與 Vue.js 核心深度集成,讓用 Vue.js 構建單頁應用變得輕而易舉,這篇文章主要介紹了Vue Router的介紹與引入,需要的朋友可以參考下

一.介紹

Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度集成，讓用 Vue.js 構建單頁應用變得輕而易舉。功能包括：

嵌套路由映射
動態(tài)路由選擇
模塊化、基于組件的路由配置
路由參數(shù)、查詢、通配符
展示由 Vue.js 的過渡系統(tǒng)提供的過渡效果
細致的導航控制
自動激活 CSS 類的鏈接
HTML5 history 模式或 hash 模式
可定制的滾動行為
URL 的正確編碼

說大白話點就是它幫助你根據(jù)不同的 url 來展示不同的頁面（組件），不用自己寫 if / else路由配置影響整個項目，所以建議單獨用config目錄、單獨的配置文件去集中定義和管理。

二.實操

安裝：

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)建路由實例并傳遞 `routes` 配置
// 你可以在這里輸入更多的配置，但我們在這里
// 暫時保持簡單
const router = VueRouter.createRouter({
    // 4. 內部提供了 history 模式的實現(xiàn)。為了簡單起見，我們在這里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的縮寫
})

router文件夾下的router.ts內容：

// 1. 定義路由組件.
// 也可以從其他文件導入
import Index from '../pages/index.vue';
import Team from '../pages/Team.vue';
import User from '../pages/User.vue';
// 2. 定義一些路由
// 每個路由都需要映射到一個組件。
// 我們后面再討論嵌套路由。
const routes = [
  { path: '/', component: Index },
  { path: '/team', component: Team },
  { path: '/user', component: User },
]
export default routes;

到此這篇關于Vue Router的介紹與引入的文章就介紹到這了,更多相關Vue Router引入內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
Router

vue-mounted中如何處理data數(shù)據(jù)
這篇文章主要介紹了vue-mounted中如何處理data數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue分頁插件的使用方法
這篇文章主要介紹了vue分頁插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
解決vue-router在同一個路由下切換,取不到變化的路由參數(shù)問題
今天小編就為大家分享一篇解決vue-router在同一個路由下切換,取不到變化的路由參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
前端必知必會之Vue?$emit()方法詳解
這篇文章主要介紹了前端必知必會之Vue?$emit()方法的相關資料,Vue.js中的$emit()方法用于在子組件中創(chuàng)建自定義事件,并在父組件中捕獲這些事件,這在需要從子組件向父組件傳遞信息的大型項目中非常有用,需要的朋友可以參考下
2025-02-02
Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點
監(jiān)聽事件是我們在使用vue.js的時候經常使用的一個功能，下面這篇文章主要介紹了Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點的相關資料，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
2017-04-04
Vue3實現(xiàn)動態(tài)高度的虛擬滾動列表的示例代碼
虛擬滾動列表是一種優(yōu)化長列表渲染性能的技術,通過只渲染可視區(qū)域內的列表項,減少DOM的渲染數(shù)量,本文就來介紹一下Vue3實現(xiàn)動態(tài)高度的虛擬滾動列表的示例代碼,具有一定的參考價值,感興趣的可以了解一下
2025-01-01
Vue中Object.assign清空數(shù)據(jù)報錯的解決方案
這篇文章主要介紹了Vue中Object.assign清空數(shù)據(jù)報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue實現(xiàn)頁面跳轉方式及傳參方式
這篇文章主要介紹了Vue實現(xiàn)頁面跳轉方式及傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
使用table做成樹形結構的table
這篇文章主要介紹了使用table做成樹形結構的table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue實現(xiàn)仿淘寶結賬頁面實例代碼
本文是小編給大家分享的vue實現(xiàn)仿淘寶結賬頁面實例代碼，主要功能是仿照淘寶頁面的結算購物車商品時自動算出合計價格的頁面，具體實例代碼大家參考下本文
2017-11-11