vue3路由配置

1、先看看package.json文件，是不是安装了vue-router，如下图，因为我安装了所以有

 2、如果没有安装，就使用命令npm install vue-router@/next --save下载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'
// import { createWebHistory } from 'vue-router'

// const history = createWebHistory()
const history = createWebHashHistory() // 采用这个路径上有#

const router = createRouter({
  history, // 路由模式
  routes: [
    {
      // 订单列表
      path: '/',
      name: 'orderList',
      component: () => import('@/views/orderList/orderList')
    },
    {
      // 拖拽
      path: '/dragAndDrop', // 这是访问路径
      name: 'dragAndDrop',
      component: () => import('@/views/businessTurnOrder/dragAndDrop') // 路由的源文件
    }
  ]
})
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文件下，新建businessTurnOrder文件夹，usinessTurnOrder文件夹得有dragAndDrop.vue文件，就是得有路由访问的源文件

 8、输入http://localhost:8080/#/dragAndDrop就可以访问创建的路由