vue路由配置和404页面配置

 一.打开vue router官网：入门 | Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/guide/

安装教程如下：

在终端运行如下代码：

然后就不按照教程走了。

在你的项目文件中，src文件夹下，新建一个router文件，再在router文件夹下新建一个index.js文件。

在index.js文件中写如下代码：

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

// import index from "~/pages/index.vue"
const routes = [
]

//这里有错误，不知道什么原因只能使用函数返回，直接定义会报错
function createRouter() {
    return _createRouter({
        history: createWebHashHistory(),
        routes
    })
}

const router = createRouter()

export default router

在main.js下写如下代码：

二.配置路由跳转

随便在src下创建一个空的vue文件：

index.vue：

<script setup>

</script>

<template>
  <div>后台首页</div>
</template>

<style scoped>
</style>

打开刚刚创建的router底下的index.vue进行router配置：

//新增如下：
const routes = [
    {
        path:"/",
        component:index
    }
]

完整代码：

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

import index from "~/pages/index.vue"
//新增如下：
const routes = [
    {
        path:"/",
        component:index
    }
]

//这里有错误，不知道什么原因只能使用函数返回，直接定义会报错
function createRouter() {
    return _createRouter({
        history: createWebHashHistory(),
        routes
    })
}

const router = createRouter()

export default router

别忘了在App.vue里面引入路由：

<script setup>

</script>

<template>
  <div></div>
  <router-view></router-view>
</template>

<style scoped>
</style>

三.404页面配置

新建一个404页面：

 

<!-- eslint-disable vue/multi-word-component-names -->
<script setup>

</script>
<template>
    <div class="py-18">
        <el-result
            icon="warning"
            title="404提示"
            sub-title="你找的页面走丢了~"
        >
            <template #extra>
            <el-button type="primary" size="medium" @click="$router.push('/')">返回首页</el-button>
            </template>
        </el-result>
    </div>
</template>

<style scoped>
</style>

打开vue-router官网：

找到：

在路由页面进行如下配置：

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

import index from "~/pages/index.vue"
//新增如下：
const routes = [
    {
        path: "/",
        component: index
    },
    //404页面捕获
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound', 
        component: () => import('~/pages/404.vue')
    },
]

//这里有错误，不知道什么原因只能使用函数返回，直接定义会报错
function createRouter() {
    return _createRouter({
        history: createWebHashHistory(),
        routes
    })
}

const router = createRouter()

export default router