Vue?2?路由指南從基礎(chǔ)到高級用法舉例
上篇文章給大家介紹了關(guān)于Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效） Vue2路由router的安裝和使用完整實(shí)例 喜歡的朋友直接閱讀。
注意：對于代碼看不清的部分，用鼠標(biāo)選中就能看到了，背景顏色和字體顏色過于接近，我也不知道怎么調(diào)，只能這樣子先看著了
一、Vue Router 是什么？
Vue Router 是 Vue.js 官方的路由管理器，它允許你在單頁面應(yīng)用中通過不同的 URL 顯示不同的組件。Vue Router 與 Vue.js 核心深度集成，提供了聲明式的路由定義、嵌套路由、動態(tài)路由、導(dǎo)航守衛(wèi)等功能，幫助開發(fā)者構(gòu)建復(fù)雜的單頁面應(yīng)用。
二、安裝與配置
1. 安裝 Vue Router
在 Vue 2 項目中，可以通過 npm 或 yarn 安裝 Vue Router：注意，vue2要安裝3點(diǎn)幾的版本
npm install vue-router@3.6.5 # 或者 yarn add vue-router@3.6.5
2. 創(chuàng)建路由實(shí)例
在項目中創(chuàng)建一個 router.js 文件，用于配置路由：
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';
// 使用 Vue Router
Vue.use(VueRouter);
// 定義路由規(guī)則
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
// 創(chuàng)建路由實(shí)例
const router = new VueRouter({
mode: 'history', // 使用 HTML5 歷史模式
routes
});
export default router;3. 在主文件中引入路由
在 main.js 中引入路由實(shí)例，并將其掛載到 Vue 實(shí)例上：
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App)
}).$mount('#app');三、基本用法
1. 使用 <router-link> 和 <router-view>
在 Vue 模板中，使用 <router-link> 創(chuàng)建導(dǎo)航鏈接，使用 <router-view> 顯示當(dāng)前路由對應(yīng)的組件。
<template>
<div>
<h1>Vue Router 示例</h1>
<nav>
<router-link to="/">首頁</router-link>
<router-link to="/about">關(guān)于</router-link>
</nav>
<router-view></router-view>
</div>
</template>2. 動態(tài)路由
動態(tài)路由允許你在 URL 中傳遞參數(shù)。例如：
const routes = [
{
path: '/user/:id',
name: 'User',
component: User
}
];在組件中，可以通過 $route.params 獲取參數(shù)：
<template>
<div>
<h2>用戶詳情</h2>
<p>用戶 ID：{{ $route.params.id }}</p>
</div>
</template>3. 嵌套路由
嵌套路由允許你在某個組件內(nèi)部定義子路由。例如：
const routes = [
{
path: '/parent',
component: Parent,
children: [
{
path: 'child',
component: Child
}
]
}
];在模板中，使用 <router-view> 顯示子路由：
<template>
<div>
<h2>父組件</h2>
<router-view></router-view>
</div>
</template>四、高級用法
1. 導(dǎo)航守衛(wèi)
Vue Router 提供了導(dǎo)航守衛(wèi)（Navigation Guards），可以在路由跳轉(zhuǎn)前后執(zhí)行一些邏輯。例如：
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
if (!isAuthenticated) {
next('/login');
} else {
next();
}
}
});2. 命名路由
為路由命名后，可以通過名稱進(jìn)行跳轉(zhuǎn)：
const routes = [
{
path: '/about',
name: 'About',
component: About
}
];在模板中使用 <router-link>：
<router-link :to="{ name: 'About' }">關(guān)于</router-link>3. 編程式導(dǎo)航
除了 <router-link>，還可以通過編程方式導(dǎo)航：
this.$router.push({ name: 'About' });4. 路由懶加載
為了優(yōu)化應(yīng)用性能，可以使用路由懶加載：
const routes = [
{
path: '/about',
name: 'About',
component: () => import('../components/About.vue')
}
];到此這篇關(guān)于Vue 2 路由指南：從基礎(chǔ)到高級的文章就介紹到這了,更多相關(guān)Vue 2 路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue項目el-upload?上傳文件及回顯照片和下載文件功能實(shí)現(xiàn)
本次需求是上傳多種固定格式的文件,且回顯的時候,圖片可以正常顯示,文件可以進(jìn)行下載,主要采用element的el-upload組件實(shí)現(xiàn),對Vue項目el-upload?上傳文件及回顯照片和下載文件功能實(shí)現(xiàn)感興趣的朋友跟隨小編一起看看吧2023-12-12
v-for中動態(tài)校驗el-form表單項的實(shí)踐
在項目開發(fā)中，我們經(jīng)常會遇到表單保存的功能，本文主要介紹了v-for中動態(tài)校驗el-form表單項的實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧<BR>2022-05-05
Vue中Vue-Baidu-Map基本使用方法實(shí)例
最近有一個項目需要用到地圖來展示位置并進(jìn)行數(shù)據(jù)交互,用vue-baidu-map實(shí)現(xiàn)出來,下面這篇文章主要給大家介紹了關(guān)于Vue中Vue-Baidu-Map基本使用的相關(guān)資料,需要的朋友可以參考下2023-03-03
Vue Router實(shí)現(xiàn)多層嵌套路由的導(dǎo)航的詳細(xì)指南
在 Vue 應(yīng)用中,使用 Vue Router 可以輕松實(shí)現(xiàn)多層嵌套路由的導(dǎo)航,嵌套路由允許你創(chuàng)建一個多層次的 URL 結(jié)構(gòu),這在構(gòu)建具有復(fù)雜導(dǎo)航結(jié)構(gòu)的應(yīng)用程序時非常有用,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了基于Vue實(shí)現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue-cli配置全局sass、less變量的方法，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue如何在vue.config.js文件中導(dǎo)入模塊
這篇文章主要介紹了vue如何在vue.config.js文件中導(dǎo)入模塊問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue數(shù)據(jù)改變但頁面沒有變的幾種情況及解決方法
如果,你發(fā)現(xiàn)自己需要在Vue中做一次強(qiáng)制更新,99.99%的情況,是你在某個地方做錯了事,所以本文給大家介紹了Vue數(shù)據(jù)改變但頁面沒有變的幾種情況及解決方法,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法
這篇文章主要介紹了Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue中jsx不完全應(yīng)用指南小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11