vue快速入门（五十二）404处理

最新推荐文章于 2024-07-25 09:24:40 发布

代码对我眨眼睛

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量348

点赞数 3

分类专栏： vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73756108/article/details/138376215

版权

vue2 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

文章详细描述了如何在Vue项目中使用VueRouter配置路由规则，包括重定向、静态路由和动态路由，以及处理404未找到页面的`notFound.vue`组件。

摘要由CSDN通过智能技术生成

注释很详细，直接上代码

新增内容
404匹配处理方法

源码

src/router/index.js

//导入所需模块
import Vue from "vue";
import VueRouter from "vue-router";
import myMusic from "@/views/myMusic.vue";
import findMusic from "@/views/findMusic.vue";
import attentionSigner from "@/views/attentionSigner.vue";
import recommendList from "@/views/recommendList.vue";
import rankingList from "@/views/rankingList.vue";
import songList from "@/views/songList.vue";
import notFound from "@/views/notFound.vue";
//调用函数将VueRouter插件安装为Vue的插件
Vue.use(VueRouter);

//配置路由规则
const routes = [
  //重定向
  { path: "/", redirect: "/MyMusic/recommendList" },
  {
    path: "/myMusic",
    component: myMusic,
    // 二级路由无需写'/'
    children: [
      {
        path: "recommendList",
        component: recommendList,
      },
      {
        path: "rankingList",
        component: rankingList,
      },
      {
        path: "songList",
        component: songList,
      },
    ],
  },
  {
    // 动态路由接受参数（后面加问号表示为可选参数）
    path: "/findMusic/:name?",
    component: findMusic,
  },
  {
    path: "/attentionSigner",
    component: attentionSigner,
  },
  {
    path: "/songList/",
    component: songList,
  },
  {
    path: "/rankingList/",
    component: rankingList,
  },
  {
    path: "/recommendList/",
    component: recommendList,
  },
  {
    path: "/attentionSigner/",
    component: attentionSigner,
  },
  // 404的情况(*通配符，放在最后匹配其他所有情况)
  {
    path:"*",
    component:notFound
  }
];

//创建路由实例
const router = new VueRouter({
  // 路由配置
  routes,
  //历史模式
  mode: 'history'
  //这里可以修改router-link的默认类名
  /*
    linkActiveClass:'my-active-class',
    linkExactActiveClass:'my-exact-active-class'
    */
});
//导出路由实例
export default router;

src/views/notFound.vue

<template>
    <div>
        <h1>404</h1>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
h1{
    font-size: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: '宋体';
}
</style>