网站建设4038gzs,网站开发运营职位,忘了网站链接怎么做,邢台网站网页设计目录
Vue3中路由讲解与使用
路由的安装与使用
路由模式的使用
编程式路由导航
路由传参
嵌套路由
命名视图
重定向与别名 Vue3中路由讲解与使用
Vue 路由是 Vue.js 框架提供的一种机制#xff0c;它用于管理网页上内容的导航。Vue 路由可以让我们在不刷新页面的情况下…
目录
Vue3中路由讲解与使用
路由的安装与使用
路由模式的使用
编程式路由导航
路由传参
嵌套路由
命名视图
重定向与别名 Vue3中路由讲解与使用
Vue 路由是 Vue.js 框架提供的一种机制它用于管理网页上内容的导航。Vue 路由可以让我们在不刷新页面的情况下根据浏览器地址栏中的路径显示不同的页面内容。
Vue 路由通常用于单页应用程序(SPA)开发它可以将应用程序划分成多个视图(view)和组件(component)并根据 URL 中的参数来动态地加载这些组件和页面。Vue 路由具有简单、灵活、可扩展等特点它可以极大地提高 Web 应用程序的用户体验和交互效果。Vue 路由在 Vue.js 3.x 版本中有了一些新的特性在使用时最好使用 Vue Router 组件库。详情可参考官方文档 在学习vue3路由之前你也可以简单了解一下vue2使用路由的方式vue2路由版本 。在开局讲解vue3路由知识之前我先透个底简单说明一下vue2与vue3路由之间发生了哪些变化抱着先了解这些内容的前提下在接着看文章获取会有醍醐灌顶的感觉。 vue2与vue3路由使用方式的区别 路由实例的创建方式 ● vue2使用 new VueRouter 创建实例 ● vue3使用 createRouter 工厂函数创建路由实例 路由实例的挂载方式 ● vue2使用 router 选项将路由实例挂载到根 Vue 实例上 ● vue3使用 app.use(router) 将路由实例挂载到根 Vue 应用上 路由钩子函数的变化 ● vue2在路由组件中使用 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子函数来拦截页面跳转或修改路由参数。 ● vue3引入了新的路由钩子函数 beforeEach、beforeResolve 和 afterEach同时还支持 传统的 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 钩子函数。 动态路由的变化 ● vue2手动使用 router.addRoutes() 方法添加动态路由。 ● vue3引入了新的 routes 选项可以直接在路由配置中定义动态路由。 路由懒加载的改进 ● vue2使用 import 加载异步路由组件。 ● vue3引入了新的 import() 语法可以更方便地进行路由懒加载。 总的来说Vue3 的路由模式相对于 Vue2 更加灵活和易用同时还加入了一些新的功能和钩子函数。 路由的安装与使用
这里我使用vite构建工具创建的vue3ts项目不了解vite的可以看一下本专栏对vite讲解的文章。
终端执行如下命令按照vue路由注意如果你是vue2项目的话就安装vue-router3版本的如果你是vue3就默认安装4版本的就好了。
npm install vue-router -S
安装完成之后一般我们都会在src目录下新建一个router文件夹里面存放着路由文件这里注册组件我采用的是路由懒加载方式只有在需要时才动态加载相应的代码从而提高应用程序的性能和加载速度。这种方式下在路由被访问时对应的组件才会被加载。
import { createRouter,createWebHistory,RouteRecordRaw } from vue-routerconst routes:ArrayRouteRecordRaw [{ path: /,component:()import(../components/login.vue) },{ path: /reg,component:()import(../components/reg.vue) },
]
const router createRouter({history: createWebHistory(),routes
})
export default router
在 main.ts 入口文件进行router路由的挂载
import { createApp } from vue
import App from ./App.vue
import router from ./routercreateApp(App).use(router).mount(#app)
如果想把写好的路由进行展示的话需要通过 router-view 作为路由出口路由匹配到的组件将进行响应的渲染。 当然我们也可以通过 router-link 作为导航按钮进行路由的动态切换如下 路由模式的使用
路由的三种形式如下 history 模式 使用 HTML5 的 History API 来管理路由状态在这种模式下URL 中不包括 # 符号。优点是 URL 看起来更加干净缺点是需要服务器端配置否则刷新页面会 404。 hash 模式 URL 中包含 # 符号后面跟着具体的路径信息。在这种模式下路由状态是通过监听 hashchange 事件来更新的。它的优点是兼容性好缺点是 URL 看起来比较丑陋。 abstact 模式 是一种特殊的路由模式它用于将嵌套路由与其父级路由相分离具体来说抽象路由模式使用一个不对应实际 URL 的“空路径”路由作为父路由。这个“空路径”路由没有对应的组件渲染只起到一个容器的作用它的下级路由的路径是基于该路由的路径计算的。 Vue3在路由模式方面的改变并不是很大只是引入了一些新的API和功能来提高应用程序的性能。 vue2采用 mode history vue3采用createWebHistory vue2采用 mode hash vue3采用createWebHashHistory vue2采用 mode abstactvue3采用createMemoryHistory 比如说我采用的是createWebHashHistory方式浏览器url地址就会出现一个 # 如下 那么在日常开发过程中我们该如何选择路由模式呢这需要考虑你的应用程序的类型和需求。如果你正在构建一个单页应用程序那么hash模式可能更适合你。如果你需要更传统的URL路径并且愿意付出服务器端配置的代价那么history模式可能更适合你。
编程式路由导航
编程式路由导航是指通过代码来控制应用程序中的页面之间的跳转。在前端框架中路由导航是实现单页面应用 (Single Page Application) 的关键之一它可以帮助用户快速地在不同的页面之间进行切换从而提高了用户的体验。
在编程式路由导航中开发者可以通过调用框架提供的 API 来实现页面跳转。这些 API 包括但不限于以下几种 push: 将新的路由添加到浏览器历史记录中并显示相应的组件。 replace: 用新的路由替换当前路由并显示相应的组件。 go: 在浏览器历史记录中向前或向后移动若干步。 back: 在浏览器历史记录中向后移动一步。 forward: 在浏览器历史记录中向前移动一步。 通过使用这些 API开发者可以非常方便地实现页面的跳转并且可以根据业务逻辑来进行灵活的控制从而实现更好的用户体验。举个简单的例子 路由传参
在编程式路由导航中我们也可以进行路由传递参数如下设置场景模拟数据
定义一个json文件存放我们模拟的json数据
{data:[{name:小张,age:20,address:北京},{name:小王,age:25,address:上海},{name:小李,age:40,address:南京}]
}
这里可以安利一个插件 JSON to TS 用来将json代码转换成 TS 接口插件安装完成之后全选json代码然后 按住 ctrlshiftalts即可如下生成对应的接口 接下来开始将数据渲染到页面上 模拟好数据之后接下来开始着重讲解几种用户数据传参的方式如下
query传参方式 params传参方式
使用该传参方式传递对象中不再是和query传参方式一样是一个path属性而是一个name属性其属性值就是我们定义好的routes属性值如下 在进行params传参时传递的需是一个对象然后要用name名称而不是path如下 我目前下载的是最新版本的vue-router如下该版本有个恶心的地方就是你用params传参是routes的路径也必须动态跟上少一个参数就不显示该参数对应的内容也是为了安全性的考虑没办法只能如此 嵌套路由
嵌套路由是指在一个路由路径下再嵌套另一个子路由用于组织和管理应用程序的不同部分或模块。这种路由方式可以提高代码可读性和可维护性同时也可以更好地控制页面渲染和用户导航。
凡是在当前路由下有一个children属性children下的路由就是该路由下的子路由如下 在父路由也通过 router-view 的方式显示子路由的内容 命名视图 重定向与别名
当然我们也可以进行设置重定向的方式如下重定向必须用在嵌套路由才能使用 当然官方也给我们提供其他的方式 设置别名的意思就是你给这路径设置一些其他的名字你访问这些名字也能访问这个组件的内容 Vue3路由的基本操作就讲解到这下一篇文章会继续讲解vue3导航守卫的相关内容喜欢的朋友可以点击关注一键三联您的支持就是博主创作的最大动力
