Vue爬坑记-----（2）Vue3使用路由

$ yarn add vue-router

router.js:

import { createWebHistory, createWebHashHistory, createRouter } from 'vue-router';
import NProgress from 'nprogress'; // 进度条
import 'nprogress/nprogress.css';
NProgress.configure({ showSpinner: false });
// 首先把你需要动态路由的组件地址全部获取
let modules = import.meta.glob('../**/*.vue')
// 路由懒加载
export const loadView = (path) => () => {
    // 然后动态路由的时候这样来取
    console.log(modules,'../views/' + path + '.vue',modules['../views/' + path + '.vue'])
    return modules['../views/' + path + '.vue']();
}
// 路由表
const routes = [
    {
        path: '/home',
        name: '/home',
        component: loadView('Home/index'),
        //子路由 需要在 这个路由的component里添加router-view
        children: [
            {
                path: '/home/detail/:id/:userid', //动态路由传参
                name: '/detail',
                component: loadView('Home/Detail')
            },
            {
                path: '/home/detail1',
                name: '/detail1',
                component: loadView('Home/Detail1')
            }
        ],
        meta: {
            title: '首页',
            hideTabs: true,
        },
    },
    {
        path: '/news',
        name: '/news',
        component: loadView('News/index'),
        meta: {
            title: '新闻',
            hideTabs: true,
        },
    },
    {
        path: '/ele',
        name: '/ele',
        component: loadView('ElementPlusTest/index'),
        meta: {
            title: '新闻',
            hideTabs: true,
        },
    },
    {
        path: '/ele1',
        name: '/ele1',
        component: loadView('ElementPlusTest/index1'),
        meta: {
            title: '新闻',
            hideTabs: true,
        },
    },
];
const router = createRouter({ history: createWebHistory(), routes })
//路由守卫
router.beforeEach((to, from, next) => {
    NProgress.start();
    next(); // 必须调用这个next函数 next函数可以传参，参数为想要跳去的目标路由 不传参就是跳转到匹配到的路由
})
router.afterEach((to, from, next) => {
    NProgress.done();
    next();
})
export default router;

mian.js：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');

app.vue：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
const fun = (e) => console.log(e);
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <br />
  <router-link to="/home">home</router-link>
  <br />
  <router-link to="/news">news</router-link>
  <br />
  <router-view v-slot="{ Component, route }">
    <button @click="() => fun({ Component, route })">查看当前路由信息</button>
    <transition name="fade-transform">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这里值得一提的是vue-router为router-view和router-link提供了插槽,插槽会提供一些有用的属性帮助实现一些路由跳转的功能
具体使用参考：

vue3:vue-router路由的使用，v-slot、动态添加、删除路由、路由导航守卫、登录守卫功能