步驟詳解：配置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)容。
