描述：

系统使用 vite + TS + Vue3 + Element-Plus + VueRoute4 + Piana

系统搭建

使用vite创建vue3项目

npm create vite@latest

安装项目所需插件

npm install vue-router@next element-plus axios pinia -D

可以安装sass支持

npm install -g sass

配置路径别名@

在vite.config.ts中添加如下代码（如果找不到要引入的path模块，则可以尝试安装）：

 npm install @types/node

import { join } from 'path'
export default defineConfig({
  server: {
    port: 8050,  //设置项目启动端口
  },
  resolve: {
    alias: {
      '@': resolve('src'),
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']  //自动识别路径下的index文件
  },
})

在tsconfig.json中添加

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
}

如果编辑器没有识别，VSCode可以安装Path Intellisense试试

VueRoute使用

在src中创建router/index.ts

import {
    createRouter, createWebHistory
    //,createWebHashHistory 
} from 'vue-router'

const routes = [
    {
        path: '/',
        meta:{title:"我是首页"},
        component: () => import("@/views/layout/home")
    },
    {
        path: '/login',
        meta:{title:"登录"},
        component: () => import("@/views/auth/login")
    },
    {
        path: "/:pathMatch(.*)*",
        redirect:'/404',
    },
    {
        path: "/404",
        name: "NotFound",
        meta:{title:"NotFound"},
        component: () => import("@/views/exception/404"),
    }
]

const router = createRouter({
    history: createWebHistory(),
    //history:createWebHashHistory(),
    routes,
})
//动态设置页面的title
router.beforeEach((to,from,next)=>{//beforeEach是router的钩子函数，在进入路由前执行
    if(to.meta.title){//判断是否有标题
        document.title = to.meta.title
    }
    next()  //执行进入路由，如果不写就不会进入目标页
})

export default router;

在main.ts中引入此插件，并使用它

import router from './router'

createApp(App)
.use(router)
.mount('#app')

//内容视图 ，标签内会展示内容
<router-view></router-view>

声名式路由跳转：

//声明式路由跳转  两种方式 加入 replace 不会留下历史记录
<router-link replace to="/login"><button>login</button></router-link>

直接使用name跳转：

<router-link :to="{ name: 'Reg' }" style="margin-left: 10px"><button>reg</button></router-link>

编程式路由导航 path ：

import { useRouter } from "vue-router";
const router = useRouter();
router.push({
    path: url,  //这里回调写成对象，方便后面传参 push 写成 replace 不会留下历史记录
});

路由传参：

query传参方式：

router.push({
  path: "/reg",
  // query 接受的是个对象{} item 此处item刚好是个对象 此时已经传过去参数了
  query: item,
});

query传参接收：

import { useRoute } from "vue-router"; // 获取参数 用 useRoute
const route = useRoute();

params传参方式：

router.push({
  name:"Reg"  //这里的name是router/index.ts中配置的路由name
  params:item
});

接收时与query方式一致，都是用useRoute()

params参数保存在内存中，query参数会显示在地址中，所以params方式刷新后会导致丢失参数数据