1 04.引入vue router4路由配置和404页面捕获

安装 | Vue Router

• 安装

npm install vue-router@4

• 项目下 src 目录下创建 router 文件夹，并创建主路由文件 index.js

// src/router/index.js


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


// 2.定义一些路由
const routes = []


// 3.创建路由实例并传递 `routes` 配置
const router = createRouter({
    history: createWebHashHistory(),
    routes
}) 


// 4.暴露出去
export default router

• 应用到项目入口文件 main.js

import router from './router'
'''略
app.use(router)

• 路由配置

// 自定义路由读取路径配置： vite.config.js
import path from 'path'             // +

export default defineConfig({
  resolve: {
    alias: {
      "~": path.resolve(__dirname,"src") // + 
    }
  },
  ...略
  
})

• src 下创建路由文件夹 pages，把所有路由放在这个文件夹内

  • pages/index.vue 首页

  • pages/about.vue 关于页

  • pages/404.vue 404页

// src/pages/index.vue
<template>
    <div>
        后台首页
    </div>
</template>


// src/pages/about.vue
<template>
    <div>
        关于页
    </div>
</template>


// src/pages/404.vue
<template>
    <div>
        <el-result
            icon="warning"
            title="404提示"
            sub-title="你找的页面走丢了"
        >
            <template #extra>
            <el-button type="primary" @click="$router.push('/')">
                回到首页
            </el-button>
            </template>
        </el-result>
    </div>
</template>

• 引入刚刚创建的三个组件到 router/index.js

...略
import Index from '~/pages/index.vue'  // +
import About from '~/pages/about.vue'  // +
import NotFound from '~/pages/404.vue' // + 

// 2.定义一些路由
const routes = [
    { path: "/", component: Index, name: "index"},      // +
    { path: "/about", component: About, name: "about"}, // +
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, // + 404 Not found 路由
]

• 修改 App.vue, 使路由生效

<script setup>

</script>

<template>
  <router-view></router-view>  // +
</template>

<style>
</style>

• 最终代码