【二】 vue-router 安装与简单使用. vue3 + ts 项目实战 (后台管理系统)

f### 1 进入项目目录 ，安装vue-router

npm i vue-router@4

安装后，可以package.json中查看 vue-router 的版本

2 最简单的vue-router 实现

2.1 先制作两个页面组件。（用于route 的示例组件）

// src/page_demo/A.vue 

<template>
  <!--这里展示模版 内容-->
  这里是A.vue 的内容
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>

</style>

// src/page_demo/B.vue
<template>
  <!--这里展示模版 内容-->
  这里是B.vue 的内容
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>

</style>

2.2 在src 目录下，创建 router/router.ts

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

const routes:Array<RouteRecordRaw> = [
     {
        path: '/a',
        name: 'a',
        component:() => import('../page_demo/A.vue'),
     },
    {
        path: '/b',
        name: 'b',
        component:() => import('../page_demo/B.vue'),
    },
]

const  router = createRouter({
    history:createWebHashHistory(),
    routes :routes
})
export default router

**这里先最简实现，体验下route的效果即可， 子菜单 ，权限等先略过 后续会一直秉承两个原则 ， 1 如无必要，不瞎折腾 2 持续演化 **

2.3 修改 main.ts 引入vue-router 插件

...  
import router  from "./router/router";
// 加上 .use(router)
createApp(App).use(router).mount('#app')

这时，访问页面时，地址会发生如下变化。

2.4 修改app.vue 写route 例子。

//将template 进行修改
<template>
  <router-link to="/a">访问A</router-link> <br/>
  <router-link to="/b">访问B</router-link> <br/>
  <router-view></router-view>
</template>

效果如图：

3 一些很小的优化。

3.1 调整一 设置默认路由

#在route.ts  加上这段 ,当路由到 / 时，会redirect 至 /a
....
    {
        path: '/',
        name: 'default',
            redirect: '/a',
    },

3.2 设置路径别名

意图： 在 router ts 中，存在 component:() => import('../page_demo/A.vue'), 后续当项目越来越大时，引入路径，可能较多，使用别名进行替代，将更容易维护和理解

//1进入项目目录。
npm install @types/node --save-dev

// 2 修改 vite.config.js
import path from "path";


// https://vitejs.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      "@":path.resolve(__dirname, "src"),
      "com":path.resolve(__dirname, "components"),
    }
  },
  ...
})

//3 修改 route.ts
     {
        path: '/a',
  
        component:() => import('@/page_demo/A.vue'),
     },
    {
        path: '/b',
        component:() => import('@/page_demo/B.vue'),
    },

这样，后续可以用 @ 来替代 src 目录。代码更简洁

3.3 一些代码重构小技巧。

// 写法1 
 component:() => import('@/page_demo/A.vue'), 是一种简写方式
也可以写成
//写法2 
const A = import('@/page_demo/A.vue');
     	...
        component:() => A,

个人偏好，用写法1，更简洁,

个人总结：

最简实现. 1 配置 path ,compoent 2 使用 在父组件