vue3下vue router4使用

1、切换到项目目录，安装路由

--安装路由
yarn add vue-router@4.0.12

2、在项目src文件夹新增router文件夹，在router文件夹内新增index.js文件

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

//创建并暴露一个路由器
const routes = [
    {
        path: '/',
        component: {
            template:`<div></div>`
        }
    },
    {
        path: '/BaoFeiZuoYe',
        name: 'BaoFeiZuoYe',
        component: () => import('../components/BaoFeiZuoYe.vue')
    },
    {
        path: '/GuaDaoYanMo',
        name: 'GuaDaoYanMo',
        component: () => import('../components/GuaDaoYanMo.vue')
    },
    {
        path: '/GuiHuanZuoYe',
        name: 'GuiHuanZuoYe',
        component: () => import('../components/GuiHuanZuoYe.vue')
    },
    {
        path: '/JiChuZiLiaoWeiHu',
        name: 'JiChuZiLiaoWeiHu',
        component: () => import('../components/JiChuZiLiaoWeiHu.vue')
    },
    {
        path: '/LingYongShenQing',
        name: 'LingYongShenQing',
        component: () => import(/* webpackChunkName: "lingyongzuoye" */ '../components/LingYongShenQing.vue')
    },
    {
        path: '/LingYongZuoYe',
        name: 'LingYongZuoYe',
        component: () => import(/* webpackChunkName: "lingyongzuoye" */ '../components/LingYongZuoYe.vue')
    },
    {
        path: '/PingZhengDu',
        name: 'PingZhengDu',
        component: () => import('../components/PingZhengDu.vue')
    },
    {
        path: '/QingXiuZuoYe',
        name: 'QingXiuZuoYe',
        component: () => import('../components/QingXiuZuoYe.vue')
    },
    {
        path: '/RuKuZuoYe',
        name: 'RuKuZuoYe',
        component: () => import('../components/RuKuZuoYe.vue')
    },
    {
        path: '/WeiXiuZuoYe',
        name: 'WeiXiuZuoYe',
        component: () => import('../components/WeiXiuZuoYe.vue')
    },
    {
        path: '/YanShouZuoYe',
        name: 'YanShouZuoYe',
        component: () => import('../components/YanShouZuoYe.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

 

3.在main.js使用路由

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'
import './assets/icon/iconfont.css'
//引入路由器
import router from './router'



const app = createApp(App)
//应用插件
app.use(naive)
// 要告诉 vue 使用 vueRouter
app.use(router)
app.mount('#app')

4、在App.vue中

<template>
  <n-config-provider :locale="locale" :date-locale="dateLocale" :breakpoints="breakpoints">
    <n-message-provider>
     
          <!--用router-link创建连接-->
          <router-link to="/BaoFeiZuoYe">报废作业</router-link>|
          <router-link to="/GuaDaoYanMo">刮刀研磨</router-link>
          <!--组件渲染在这里-->
          <router-view></router-view>
    </n-message-provider>
  </n-config-provider>
</template>

<script>
import { zhCN, dateZhCN } from "naive-ui";
import "./assets/icon/iconfont.css"


export default {
  name: "App",
  setup() {
    return {
      zhCN,
      dateZhCN,
      locale: zhCN,
      dateLocale: dateZhCN,
      breakpoints: { 'xs': 0, 's': 4, 'm': 6, 'l': 8, 'xl': 10 }
    };
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5.index.html文件不要修改

 

6.错误处理

 

 在项目跟目录添加vue.config.js

module.exports = {
      lintOnSave:false, //关闭语法检查
      runtimeCompiler:true//表示使用包含运行时编译器的 Vue 构建版本，然后重新运行就可以了(生产环境别忘了注掉)
  }