微信小程序版本更新提示

前言

本篇文章代码基于上文中的axios封装继续加工，我的目标是，通过这样的一篇篇文章给大家提供一个基础模板以供使用。

安装依赖

npm i vue-router

创建文件夹

1. src下创建router文件夹，然后创建index.ts文件
2. router文件夹下创建modules文件夹，然后创建homepage.ts文件
3. src下创建pages文件夹，然后创建about文件夹，里面创建index.vue文件
4. src下创建pages文件夹，然后创建home文件夹，里面创建index.vue文件
   文件目录格式如下:
   

简单给vue文件添加内容

1. homepage.ts

   <template>
       <div>
           我是主页
       </div>
   </template>

2. about.ts

   <template>
       <div>
           我是关于页
       </div>
   </template>

配置router

修改App.vue

<template>
  <router-view :key="key"  />
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const key = computed(() => {
  return router.currentRoute.value.fullPath;
});
</script>

修改main.ts

import { createApp } from 'vue';
import router from './router';
import App from './App.vue';

const app = createApp(App);
app.use(router);

app.mount('#app');

修改router/moudules/homepage.ts

export default [
    {
        path:"/home",
        component:()=>import("@/pages/home/index.vue"),
    },
    {
        path:"/about",
        component:()=>import("@/pages/about/index.vue"),
    }
]

修改router/index.ts

import {  createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router';

// 导入homepage相关固定路由
const homepageModules = import.meta.globEager('./modules/**/homepage.ts');

// 导入modules非homepage相关固定路由
const fixedModules = import.meta.globEager('./modules/**/!(homepage).ts');

// 其他固定路由
const defaultRouterList: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home',
  },
];
// 存放固定路由
export const homepageRouterList: Array<RouteRecordRaw> = mapModuleRouterList(homepageModules);
export const fixedRouterList: Array<RouteRecordRaw> = mapModuleRouterList(fixedModules);

export const allRoutes = [...homepageRouterList, ...fixedRouterList, ...defaultRouterList];

// 固定路由模块转换为路由
export function mapModuleRouterList(modules: Record<string, unknown>): Array<RouteRecordRaw> {
  const routerList: Array<RouteRecordRaw> = [];
  Object.keys(modules).forEach((key) => {
    // @ts-ignore
    const mod = modules[key].default || {};
    const modList = Array.isArray(mod) ? [...mod] : [mod];
    routerList.push(...modList);
  });
  return routerList;
}

// 创建路由
const router = createRouter({
  history: createWebHashHistory(),
  routes: allRoutes,
  scrollBehavior() {
    return {
      el: '#app',
      top: 0,
      behavior: 'smooth',
    };
  },
});

export default router;

此时，我们的路由已经可以简单使用了

好了，本文就分享到这里了，封装代码我放在了我的git仓库下期再见!