vue3路由配置

1、先看看package.json檔案，是不是安裝了vue-router，如下圖，因為我安裝了所以有

2、如果沒有安裝，就使用命令下載vue-router，因為是vue3，要使用vue-router4.0.0以上版本

npm install vue-router@/next --save

3、在專案src資料夾下，新建一個route資料夾，route資料夾下新建index.js檔案，如下圖

4、index.js程式碼如下：

import {
    createRouter,
    createWebHashHistory
} from 'vue-router'

const routes = [{
        //下單頁
        path: '/',
        name: 'addOrder',
        component: () => import('@/views/order/addOrder.vue')
    },
    {
        // 地址管理列表
        path: '/addr-list', // 這是訪問路徑
        name: 'addrList',
        component: () => import('@/views/address/addr-list.vue') // 路由的原始檔
    }
]

const history = createWebHashHistory() // 採用這個路徑上有#
const router = createRouter({
    history, // 路由模式
    routes: routes
})
export default router

5、main.js配置router

import { createApp } from 'vue'
// 引入元件
import App from './App.vue'
// 引入路由
import router from './route'
// 引入vuex
import store from './store/index'
// 建立app
const app = createApp(App)
// 公共請求頭部
// 使用vuex
app.use(store)
// 注入路由
app.use(router)
// 掛載例項
app.mount('#app')
 
// createApp(App).mount('#app')

6、App.vue程式碼如下：

<template>
  <div>
    <router-view />
  </div>
</template>
 
<script>
 
export default {
  name: 'App',
  components: {
  }
}
</script>
 
<style>
</style>

7、在src資料夾下的views檔案下，新建order資料夾，order資料夾得有addOrder.vue檔案，就是得有路由訪問的原始檔

8、輸入http://localhost:8080/#/就可以訪問建立的路由