vite+vue3 + ts 项目搭建——vue-router

一整个流程有点长，我就分开写了；
主要还是看官网走便可以了

1. 路由管理：vue-router

1. 官网:链接
2. 安装：npm install vue-router@4
3. 定义：
   创建src/router/index.ts文件，和相应的页面文件

   import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
   import { IMenubarList } from '/@/type/store/layout'
   
   // 定义路由页面
   export const allowRouter:Array<IMenubarList> = [
   	 {//默认路由
         name:'',
         path: '/',
         redirect:'/index',
         component: (() => import('../view/index.vue')) as unknown as () => Promise<typeof import('*.vue')>,
         meta: { title: ''}
       },
       {
         name:'Index',
         path: '/index',
         component: (() => import('../view/index.vue')) as unknown as () => Promise<typeof import('*.vue')>,
         meta: { title: '首页'}
       },
       {
           name: 'Login',
           path: '/Login',
           component: (() => import('/@/layout/Login/index.vue')) as unknown as () => Promise<typeof import('*.vue')>,
           meta: { title: '登录' }
       },
       
   ]
   
   // 创建路由
   const router = createRouter({
       history: createWebHashHistory(), // createWebHistory
       routes: allowRouter as RouteRecordRaw[]
   })
   
   export default router
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34

   // @/type/store/layout
   export interface IMenubarList {
     parentId?: number | string
     id?: number | string
     name: string
     path: string
     redirect?: string | {name: string}
     meta: {
         title: string
         permission?: string[]
         activeMenu?: string // 路由设置了该属性，则会高亮相对应的侧边栏
         noCache?: boolean // 页面是否不缓存
     }
     component: (() => Promise<typeof import('*.vue')>) | string
     children?: Array<IMenubarList>
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

4. 注册

   //main.ts
   import router from '/@/router/index'
   createApp(App)
   .use(pinia)
   .use(router)
   .mount('#app')
   1
   2
   3
   4
   5
   6

5. 使用：
   • 标签:
     首页
   • api：

     <script setup lang="ts">
      	import { useRoute, useRouter } from "vue-router";
      	const router = useRouter();
      	function onClick() {
      	  router.replace('/login')
      	}
      </script>
     1
     2
     3
     4
     5
     6
     7

回去项目搭建: 链接