vue3路由组件
路由器的设置和使用是网络连接不可或缺的步骤，如果您想更好地利用网络资源，本文vue3路由组件将为您提供适用于不同场景的路由器设置方法和使用技巧
本文内容目录一览：
VUE3笔记6（路由router，全局状态管理）
注意：路由视图组件router-view标签不要漏了
又比如此处案例
2.2 需要传参的地址，例如Goods.vue的地址需要传参数id
2.2.1 首先在路由中开启props：true
2.2.2 在Goods.vue中，接受参数props：[ 'id' ]
2.2.3 然后引入组合式api，使用规则如下所示
设置如下（ 加粗字体为模块化全局状态管理的引用方式 ）
首先引入组合式API，import { useStore } from "vuex";
注意：加粗字体是模块化全局状态管理的使用规则的不同点（数据， 计算属性（需要加上中括号） ，函数的不同）
在store中建议文件夹modules，并在其中新建phone.js模块，编译如下，
注 意点：设置私有命名空间（加粗字体），其他照旧
4.1.1 在src中新建工具包utils，其中建立文件index.js文件，编译如下函数
4.1.2 在组件中引用
4.1.3 在组件中使用（注意：上述文件只能映射数据，不能映射方法）
加粗字体是映射函数的使用方式（删减和应用方式）
vue3 + vite实现异步组件和路由懒加载
在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现。但是在 Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了。本文就详细讲讲 vue3 中 异步组件 和 路由懒加载 的实现。
所以，下面的异步组件声明：
等价于：
Vue 3.x的异步组件加载函数将不再接收 resolve 和 reject ，而且必须始终返回 Promise 。也就是说，工厂函数接收 resolve 回调的方式定义异步组件在 Vue 3.x 不能使用了。
提示： 如果是用 vite 工具来构建项目，在本地开发使用 import 做 路由懒加载 ，可以正常加载，但是会报警告；打包到 生产环境 会报错，页面不会正常展示，可以使用以下两种方法来实现。
欢迎访问： 个人博客地址
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的过度动画复制过来，需要做一些改动。
vue中组件3种编程式路由跳转传参
A组件跳转B组件传参
A组件
路由配置
B组件
A组件跳转B组件传参
A组件
B组件
解决丢失参数问题可用vuex或localstorage存储参数
A组件跳转B组件传参
A组件
B组件
以上就是vue3路由组件的全部内容了，文章比较长感谢您的耐心阅读，希望能帮到您，
