1.下載 VueRouter 模塊
在命令行中輸入
yarn add vue-router
2.導?相關函數
在自己創建的router/index.js 文件中
import { createRouter, createWebHashHistory } from 'vue-router'
3.創建路由實例
在自己創建的router/index.js 文件中
const theFirstRouter =()=>{return import('@/views/theFirstRouter.vue')};//懶加載模式
const routes=[????????// 創建路由規則
? ?{ path: '/', component:theFirstRouter}
]
const router = createRouter({????????//創建路由實例
? ? history: createMemoryHistory(),
? ? routes
});
export default router? ? ? ? //導出路由實例，我這是默認導出
4.注冊, 將路由實例注冊到應?中, 讓規則?效
此過程在main.js 文件中
import router from './router'? ? ? ? //因為我這是默認導入；
app. use (router)? ? ? ? ? ? ? ? //將路由交給app組件使用
5.在?錄下, 創建需要的??組件，并配置路由規則
先將文件組件化，然后配置路由表；
6.給路由出?(路徑匹配的組件, 顯?的位置)
< template >????????<!-- 路由出? -->????????< router-view /></ template >
?7.抽離
將所有東西寫在一個頁面上；抽離出來
router/index.js中寫的
import { createRouter, createMemoryHistory } from 'vue-router'
const theFirstRouter =()=>{return import('@/views/theFirstRouter.vue')}; ? ?//懶加載
// 創建路由規則
const routes=[
? ?{ path: '/', component:theFirstRouter}
]
//創建路由
const router = createRouter({
? ? history: createMemoryHistory(),
? ? routes
});
export default router
main.js中寫?
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'? ? ? ?//主要是紅色這一部分；把代碼引進去
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
