路由器设置和无线WIFI设置可能对于初学者来说比较复杂和困难，本文vue3编程式路由将为您进行深入浅出的讲解和指导。

本文内容目录一览：

• 1、Vue3+elemetPlus支持动态路由和菜单管理UI框架
• 2、Vue路由 -- 编程式导航
• 3、基于 Vue3 和 TypeScript 项目大量实践后的思考
• 4、vue中组件3种编程式路由跳转传参
• 5、vue3实践---路由router

Vue3+elemetPlus支持动态路由和菜单管理UI框架

内容较多请耐心阅读，你认真读完一定获益匪浅

这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。

"element-plus": "^1.0.2-beta.70",

"vue": "^3.0.0",

"vue-router": "^4.0.0-0"

1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。

2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库， 避免因为项目集成库过多给你带来烦恼 。

3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。

4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。

5、 更少的干扰 。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。

Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。

我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。

import { createApp } from 'vue'

import ElementPlus from 'element-plus';

import App from './App.vue'

import router from './router'

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

const app = createApp(App)

app.use(ElementPlus)

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

// 注册全局组件

import Uicon from './unitui/sub/Uicon.vue'

app.component('Uicon',Uicon)

你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改

这是一个全局注册的图标选择器，你可以在任意组件通过 使用图标选择器，它挂载在main.js文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。

实际效果

这是一个非常重要的内置组件，它主要用于模拟登录时的操作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。

其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：

init_route(route_data) {

//依据后端返回的json数据生成路由

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () = import(`@/${route_data[index].children[i].component}`),

// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index route_data.length; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

this.$router.addRoute(init_route_data[index]); //循环添加数组

}

this.init_menu(); //执行菜单生成方法

},

其他三个你可以随意修改

在vue2动态路由项目之中，在app.vue文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容，然后再main.js中引入。

init_route.js内容：

import router from '@/router'

function init_route() {

//依据后端返回的json数据生成路由

if (sessionStorage.getItem("route_data") != null) {

const route_data = JSON.parse(sessionStorage.getItem("route_data"));

// console.log(route_data);

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index route_data.length; index++) {

//循环后端返回的json

//循环

if (route_data[index].children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i route_data[index].children.length; i++) {

init_route_data[index].children[i] = {

path: route_data[index].children[i].path, //路由url

name: route_data[index].children[i].name, //路由名

component: () =

import(`@/${route_data[index].children[i].component}`),

// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index].children[i].meta.show_site, //是否全屏显示

web_title: route_data[index].children[i].meta.web_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index].path, //路由url

name: route_data[index].name, //路由名

component: () = import(`@/${route_data[index].component}`),

// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index].meta.show_site, //是否全屏显示

web_title: route_data[index].meta.web_title //网站标题

}

};

// console.log(index);

}

}

// console.log(init_route_data); //打印生成初始化路由数组

for (let index = 0; index route_data.length; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

router.addRoute(init_route_data[index]); //循环添加数组

}

// 这里放置刷新

// console.log('app');

// const index=window.location.href.lastIndexOf("#")

// const url=window.location.href.substring(index+1,window.location.href.length);

// this.$router.push(url)

}

}

init_route()

在main.js中引用：

import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失

此时便可完成刷新自动初始化

我们通过在app.vue文件中通过获取路由中meta. show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。

App.vue源码：

1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为：

#sub_admin_back {

width: 100%;

/* 非ui框架将height写为height: 100vh; */

height: 100vh;

background-size: cover;

position: relative;

background-color: #ffffff;

border-radius: 10px;

}

1、没能尽可能减少对框架的干扰，你仍然需要保持对main.js的适当修改。

Vue路由 -- 编程式导航

        ①、router.push(location, onComplete?, onAbort?)

        ②、router.replace(location, onComplete?, onAbort?)

区别：push会向 history 添加新记录，replace不会向 history 添加新记录。下述使用push方式记录   name,path,传参得到的结果

             注意：此情况下刷新浏览器，params参数会丢失

  注意：跟在url后面的参数，刷新浏览器依旧保留

注意： Vue Router 官网解释：如果提供了 path，params 会被忽略。

注意：跟在url后面的参数，刷新浏览器依旧保留

注意：命名路由的最后一个值为动态的，且刷新浏览器params参数有值。

            适合使用在页面跳转带参数，但是又不想跟在url？后面时使用

基于 Vue3 和 TypeScript 项目大量实践后的思考

Vue3出来已经有一段时间了，在团队中，也进行了大量的业务实践，也有了一些自己的思考。

总的来说，Vue3无论是在底层的原理上，还是在业务的实际开发中，都有了长足的进步。

使用 proxy 代替之前的 Object.defineProperty 的API，性能更加优异，也解决了之前vue在处理对象、数组上的缺陷；在diff算法上，使用了静态标记的方式，大大提升了Vue的执行效率。

在使用的层面，我们从options Api，变成了composition Api，慢慢的在实际的业务中，我们抛弃了原本的data、methods、computed那种隔离式的写法。compositon Api，它更加聚焦，它讲究的是相关业务的聚合性。

完全良好的支持了TypeScript，类型校验也成为了以后Vue3进行大型项目开发的质量保障，同时这也是面向了趋势 -- 前端的未来就是TypeScript！

compositon Api的本质，体现在代码里面，也就是一个setup函数，在这个setup函数中，返回的数据，会用到该组件的模板中。return的这个对象，一定程度上，代表了之前vue2中的data属性。

这时候，对于大多数初学者来说，可能存在的疑惑就是，那么我能不能定义options Api的写法，比如data、computed、watch、methods等等。

这里我需要明确的是，Vue3是完全兼容Vue2的这种options Api的写法，但是从理念上来说，更加推荐setup的方式，来写我们的组件。

原因如下：Vue3的存在，本身是为了解决Vue2的问题的，Vue2的问题就是在于，聚合性不足，会导致代码越来越臃肿！setup的方式，能够让data、方法逻辑、依赖关系等聚合在一块，更方便维护。

也就是说，以后我们尽量不要写单独的data、computed、watch、methods等等，不是Vue3不支持，而是和Vue3的理念违背。

components属性，也就是一个组件的子组件，这个配置在Vue2和3的差异不大，Vue2怎么用，Vue3依然那么用。

在功能方面，ref 和 reactive，都是可以实现响应式数据！

在语法层面，两个有差异。ref定义的响应式数据需要用[data].value的方式进行更改数据；reactive定义的数据需要[data].[prpoerty]的方式更改数据。

但是在应用的层面，还是有差异的，通常来说：单个的普通类型的数据，我们使用ref来定义响应式。表单场景中，描述一个表单的key:value这种对象的场景，使用reactive；在一些场景下，某一个模块的一组数据，通常也使用reactive的方式，定义数据。

那么，对象是不是非要使用reactive来定义呢？其实不是的，都可以，根据自己的业务场景，具体问题具体分析！ref他强调的是一个数据的value的更改，reactive强调的是定义的对象的某一个属性的更改。

周期函数，在Vue3中，是被单独使用的，使用方式如下：

在Vue2中，其实可以直接通过this.$store进行获取，但是在Vue3中，其实没有this这个概念，使用方式如下：

在Vue2中，是通过this.$router的方式，进行路由的函数式编程，但是Vue3中，是这么使用的：

merchant.ts

这一部分内容，准确的来说，是TS的内容，不过它与Vue3项目开发，息息相关，所以真的想用Vue3，我们还是得了解TS的使用。

不过这一部分，我不会介绍TS的基础语法，主要是在业务场景中，如何组织TS。

在一个常见的接口请求中，我们一般使用TS这么定义一个数据请求，数据请求的req类型，数据请求的res类型。

vue中组件3种编程式路由跳转传参

A组件跳转B组件传参

A组件

路由配置

B组件

A组件跳转B组件传参

A组件

B组件

解决丢失参数问题可用vuex或localstorage存储参数

A组件跳转B组件传参

A组件

B组件

vue3实践---路由router

具体的项目创建这里就不说了，直接参考官方文档就够了： 安装 | Vue.js (vuejs.org)

不得不说，vite 是真滴强，速度比起webpack 快了好几倍，用过就真的回不去了。本次的实践是实现一个常见的后台管理系统，细节会尽量跳过，只集中在路由上面去展示和记录。

首先整个页面就是一级路由，通常会有登录页，报错页，主页之间的切换，这里也是做路由切换动画的主要地方。当顶部有导航菜单的时候红色框就是二级路由，以此类推绿色框就是三级路由。

创建好vue3项目的第一步就是安装vue-router ,因为vite 默认并没有安装的。参考官网： 安装 | Vue Router (vuejs.org)

然后在src 目录下创建router目录，并添加2个文件index.js,routes.js.

这里就要画重点了。因为vue3的过度动画transition组件跟vue2比变化还是比较大的。主要是以下的2各方面：

1.transition组件在vue 2 中是作为父级包裹路由router-view 的，到了vue3就反过来了

2.动画类名发生了一点变化，开始和结束变成了from 和 to ，所以不能直接吧vue2的过度动画复制过来，需要做一些改动。

配置路由器和Wi-Fi可能对一些人来说是一项挑战，但是只要您按照正确的步骤进行，就能够成功地配置网络连接。同时，为了保证网络的安全性，建议您设置一个强密码，并避免使用公共Wi-Fi，以免被黑客攻击。