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：

打开刚刚创建的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里面引入路由：

三.404页面配置

新建一个404页面：

 

打开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