在vue3項目中使用vue-router

版本

"vue": "^3.0.0",
"vue-router": "^4.0.11"

創建項目

vue create <項目名稱>，配置選擇默認的vue3配置。
npm install vue-router@next 然后安裝生產環境的vue-router。

路由配置

新建目錄src/router，在該目錄新建文件index.js。
src/router/index.js

//導入路由方法
import { createRouter, createWebHistory } from 'vue-router'
//導入組件
import Home from '@/views/home'
import About from '@/views/about'
//路由規則
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
//路由創建
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

createWebHistory是設置history模式， createWebHashHistory是設置hash模式。

創建並掛載根實例

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//確保 _use_ 路由實例使整個應用支持路由。
createApp(App).use(router).mount('#app')

使用路由組件

<div class="nav">
    <!--使用 router-link 組件進行導航 -->
    <!--通過傳遞 `to` 來指定鏈接 -->
    <!--`<router-link>` 將呈現一個帶有正確 `href` 屬性的 `<a>` 標簽-->
    <router-link to="/">首頁</router-link> |
    <router-link to="/about">關於</router-link>
</div>
    <hr width="100%">
  <!-- 路由出口 -->
  <!-- 路由匹配到的組件將渲染在這里 -->
<router-view></router-view>

效果