前言

本文学习路由基础动态路由动态路由带数据 404单页面重定向懒加载命名路由和编程式导航

1、创建项目

vite 创建项目在空白文件夹打开命令行

npm create vite@latest

设置项目名称 eggpain
选择vue 框架
选择JavaScript
回车
cd 进入项目
输入 npm install (这时候会根据package.json文件安装依赖,生成node_modules文件夹)
进入项目清空所有不需要的东西
运行项目 npm run dev 运行后打开文件

2、路由基础

1. npm install vue-router@4

2. main文件增加代码

main 文件是用来全局配置的所以路由文件导出去

import router from './router'

.use(router)

main 文件如下：

3.创建router文件文件位置看目录

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [{ path: "/", component: Home }];

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

export default router;

4 app 文件修改

<template>
  <nav><router-link to="/">主页</router-link> |</nav>
  <router-view></router-view>
</template>

3、动态路由（路由的切换）

1.导入这份json文件

看目录

2. app文件增加

    <router-link v-for="dataEgg in dataEggs" :key="dataEgg.id" :to="{ name: 'eggs', params: { eggType: dataEgg.type } }">
      {{ dataEgg.name }} |
    </router-link>
    
<script>
import dataEggs from "./data.json";
export default {
  data() {
    return {
      dataEggs
    };
  }
};
</script>

3. router文件增加

{ path: "/eggs/:eggType", name: "eggs", component: () => import("../views/Eggs.vue") }

点击的时候路由跟着变那你就成功了

4、动态路由（渲染数据）

路由改变成功后还有data文件还有其他数据我们也可以渲染出来

<template>
  <div v-if="!dataEgg">
    <h1>查无此蛋</h1>
  </div>
  <div v-else>
    <h1>{{ dataEgg.name }}</h1>
    <p>{{ dataEgg.description }}</p>
    <p>{{ dataEgg.flavour }}</p>
    <img :src="`../../src/assets/images/${dataEgg.image}`" />
  </div>
</template>

<script>
import dataEggs from "../data.json";
export default {
  computed: {
    eggType() {
      return this.$route.params.eggType;
    },
    dataEgg() {
      return dataEggs.find((dataEgg) => dataEgg.type === this.eggType);
    }
  }
};
</script>

<style scoped>
img {
  width: 150px;
  height: 150px;
}
</style>

5、重定向

重定向如果输入eggs 就会跳到/eggs/chicken-egg

const routes = [
  { path: "/", component: Home },
  { path: "/eggs/:eggType", name: "eggs", component: () => import("../views/Eggs.vue") },
  // 重定向 如果输入eggs 就会跳到/eggs/chicken-egg
  { path: "/eggs", redirect: "/eggs/chicken-egg" },
  { path: "/:pathMatch(.*)*", component: () => import("../views/NotFound.vue") }
];

6、404

` 官方提供的语法直接写就行了然后引入自己的404页面

{ path: "/:pathMatch(.)", component: () => import("404文件") } `

7、懒加载

想要实现当用户访问到相关页面时再进行加载

懒加载的打包就会分离出来

8、命名路由和编程式导航

1.声明式导航

在router-link 里面用to 导航叫声明式导航

2. 编程式导航

一般会用来前进和后退

在app设置两个按钮前进和后退

利用 .go() 进行前进后退即可

 backward() {
      this.$router.go(-1);
    },
    forward() {
      this.$router.go(1);
    }

项目目录

data.json

[  {    "id": 1,    "name": "鸡蛋",    "type": "chicken-egg",    "image": "chicken-egg.jpeg",    "description": "又名鸡卵、鸡子，是母鸡所产的卵",    "flavour": "味甘，性平，无毒（煮熟后）"  },  {    "id": 2,    "name": "鸭蛋",    "type": "duck-egg",    "image": "duck-egg.jpeg",    "description": "又名鸭子、鸭卵、太平、鸭春、青皮等，为鸭科动物家鸭的卵，受精卵可孵化成小鸭",    "flavour": "性涼、味甘"  },  {    "id": 3,    "name": "鹅蛋",    "type": "goose-egg",    "image": "goose-egg.jpeg",    "description": "家禽鹅生下的卵",    "flavour": "有些油"  },  {    "id": 4,    "name": "鹌鹑蛋",    "type": "quail-egg",    "image": "quail-egg.jpeg",    "description": "鵪鶉所產的卵，蛋殼表面帶有棕褐色斑點",    "flavour": "味甘、性平"  },  {    "id": 5,    "name": "笨蛋",    "type": "dumb-egg",    "image": "dumb-egg.jpeg",    "description": "我才不是笨蛋",    "flavour": "没吃过"  }]

vue-router 快速理解和使用 核心基础知识

前言