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/#/就可以访问创建的路由