步驟詳解:配置Vue項目的路由系統(tǒng)
在Vue項目中,為了實現(xiàn)頁面間的靈活跳轉(zhuǎn)和組件的動態(tài)加載,我們通常會利用Vue Router這一官方路由管理器。以下將詳細(xì)介紹如何在Vue項目中設(shè)置和使用路由。
1. 創(chuàng)建路由文件夾及文件
首先,在Vue項目的src
目錄下,我們需要創(chuàng)建一個名為router
的文件夾。這個文件夾專門用于存放與路由相關(guān)的配置文件。
接著,在router
文件夾內(nèi),創(chuàng)建一個名為index.*
的文件。這個文件將負(fù)責(zé)創(chuàng)建并導(dǎo)出Vue Router的實例,它是整個路由系統(tǒng)的核心。
2. 編寫路由配置
在index.*
文件中,我們需要導(dǎo)入Vue和Vue Router,然后定義路由配置(即定義不同的路徑對應(yīng)哪個組件),*創(chuàng)建并導(dǎo)出Vue Router實例。
// 引入Vue和VueRouter
import Vue from 'vue';
import Router from 'vue-router';
// 引入需要路由的組件(假設(shè)我們有兩個組件Home.vue和About.vue)
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
// 讓Vue使用VueRouter
Vue.use(Router);
// 定義路由
// 每個路由應(yīng)該映射一個組件。 'component' 可以是
// 通過 Vue.extend() 創(chuàng)建的組件構(gòu)造器,
// 或者,只是一個組件配置對象。
// 我們晚點再討論嵌套路由。
c*t routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
// 創(chuàng)建router實例,然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過先這么簡單著吧。
c*t router = new Router({
mode: 'history', // 使用 HTML5 History 模式
base: process.env.BASE_URL,
routes // (縮寫)相當(dāng)于 routes: routes
});
export default router;
3. 在main.*中引入并使用路由
接下來,在項目的入口文件main.*
中,我們需要引入剛才創(chuàng)建的路由配置(即router/index.*
),并通過Vue實例的router
選項注冊路由。
import Vue from 'vue';
import App from './App.vue';
// 引入路由配置
import router from './router';
Vue.config.productionTip = false;
// 創(chuàng)建Vue實例時,傳入router配置
new Vue({
router,
render: h => h(App),
}).$mount('#app');
4. 配置路由出口
*,在Vue應(yīng)用的根組件App.vue
中,我們需要添加一個<router-view></router-view>
標(biāo)簽。這個標(biāo)簽是一個功能性組件,用于渲染匹配到的路由組件。
<template>
<div id="app">
<!-- 路由出口 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
/* 樣式代碼 */
</style>
至此,Vue項目的路由系統(tǒng)就配置完成了。當(dāng)應(yīng)用啟動時,Vue Router會根據(jù)當(dāng)前URL解析出對應(yīng)的路由,并將<router-view>
中的內(nèi)容渲染為對應(yīng)路由組件的內(nèi)容。