目录一、vue中的路由作用二、vue中的路由router使用步骤三、路由跳转1、带参数路由跳转：（1）this.$router.push() ：（2）this.$router.replace() ：2、不带参数路由跳转3、this.$router.go(n)四、标签路由五、路由元：六、路由使用的坑官方文档地址：入门|VueRouter一、vue中的路由作用vue的主要思想是组件化开发，路由用来配置组件对应展示路径，比如二、vue中的路由router使用步骤创建路由文件——使用路由——配置路由出口，使路由配置内容展示在页面上（1）创建路由文件：一般路由文件单独放在router文件夹在src目录下
目录一、vue中的路由作用二、vue中的路由router使用步骤三、路由跳转1、带参数路由跳转：（1）this.$router.push() ：（2）this.$router.replace() ：2、不带参数路由跳转3、this.$router.go(n)四、标签路由五、路由元：六、路由使用的坑官方文档地址：入门|VueRouter一、vue中的路由作用vue的主要思想是组件化开发，路由用来配置组件对应展示路径，比如二、vue中的路由router使用步骤创建路由文件——使用路由——配置路由出口，使路由配置内容展示在页面上（1）创建路由文件：一般路由文件单独放在router文件夹在src目录下
vite创建vue3+ts项目为何选择vite：vite是一个基于Vue3单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒run）本文技术栈是vue3+vue-router+ts+vite+element-plus+pinia。初始化项目（1）在需要创建位置cmd目录下执行npminitvite@latest（2）输入项目名称（3）选择vue（（有时出现上下键不能选择，手动输入选项回车就行））（4）选择vue-ts（或者是选择语
vite创建vue3+ts项目为何选择vite：vite是一个基于Vue3单文件组件的非打包开发服务器，它做到了本地快速开发启动：快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。（平均一秒run）本文技术栈是vue3+vue-router+ts+vite+element-plus+pinia。初始化项目（1）在需要创建位置cmd目录下执行npminitvite@latest（2）输入项目名称（3）选择vue（（有时出现上下键不能选择，手动输入选项回车就行））（4）选择vue-ts（或者是选择语
欢迎来到我的博客📔博主是一名大学在读本科生，主要学习方向是前端。🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🛠目前正在学习的是🔥React框架React框架React框架🔥，中间穿插了一些基础知识的回顾🌈博客主页👉codeMak1r.小新的博客😇本文目录😇路由导航守卫1.React项目中2.Vue项目中本文被专栏【React–从基础到实战】收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻💻！路由导航守卫本节目标:能够实现未登录时访问拦截并跳转到登录页面（路由鉴权实现）1.React项目中实现思路自己封装AuthRoute路由鉴权高阶组件，实现未登
欢迎来到我的博客📔博主是一名大学在读本科生，主要学习方向是前端。🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🛠目前正在学习的是🔥React框架React框架React框架🔥，中间穿插了一些基础知识的回顾🌈博客主页👉codeMak1r.小新的博客😇本文目录😇路由导航守卫1.React项目中2.Vue项目中本文被专栏【React–从基础到实战】收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻💻！路由导航守卫本节目标:能够实现未登录时访问拦截并跳转到登录页面（路由鉴权实现）1.React项目中实现思路自己封装AuthRoute路由鉴权高阶组件，实现未登
vue2中简单理解为，route是用来获取路由信息的，router是用来操作路由的。$route是路由信息对象，每一个路由都会有一个route对象，是一个局部的对象,里面主要包含路由的一些基本信息，比如name、meta、path、hash、query、params、fullPath、matched、redirectedFrom...1.$route.name 当前路径名字2.$route.meta 路由元信息可以用在导航守卫查看要跳转的页面是否需要登录才能查看3.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。4.$route
vue2中简单理解为，route是用来获取路由信息的，router是用来操作路由的。$route是路由信息对象，每一个路由都会有一个route对象，是一个局部的对象,里面主要包含路由的一些基本信息，比如name、meta、path、hash、query、params、fullPath、matched、redirectedFrom...1.$route.name 当前路径名字2.$route.meta 路由元信息可以用在导航守卫查看要跳转的页面是否需要登录才能查看3.$route.path 字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。4.$route
前端路由的功能：让用户从一个页面跳转到另一个页面。前端路由是一套映射规则，在React中，是URL路径与组件的对应关系。使用React路由简单来说就是配置路径与组件（配对）。路由的本质:一个路径path对应唯一的一个组件component当我们访问一个path自动把path对应的组件进行渲染。React路由基本使用1.安装首先你需要有一个React项目：npxcreate-react-appmy-app（这是React脚手架初始化项目）注：React路由使用前需要先安装react-router-dom的包，React脚手架初始化项目时不会自动安装这个包，需要我们手动再安装安装包：yarnadd
前端路由的功能：让用户从一个页面跳转到另一个页面。前端路由是一套映射规则，在React中，是URL路径与组件的对应关系。使用React路由简单来说就是配置路径与组件（配对）。路由的本质:一个路径path对应唯一的一个组件component当我们访问一个path自动把path对应的组件进行渲染。React路由基本使用1.安装首先你需要有一个React项目：npxcreate-react-appmy-app（这是React脚手架初始化项目）注：React路由使用前需要先安装react-router-dom的包，React脚手架初始化项目时不会自动安装这个包，需要我们手动再安装安装包：yarnadd
