前端框架Vue学习 ——(七)Vue路由(Vue Router)

文章目录


Vue路由使用场景

使用场景:如下图,点击部门管理的时候显示部门管理的组件,员工管理的时候显示员工管理的组件。

前端路由:指的是 URL 中的 hash(#号)与组件之间的对应关系。

Vue Router 介绍

介绍:Vue Router 是 Vue 的官方路由

组成:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件,浏览器会解析成 <a>
  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件


Vue Router 使用

注意: 路由信息在 src/router/index.js 中配置

安装 Vue Router

要实现的效果

  1. router/index.js 中配置路由信息
  1. 在相应的 views/tlias/DeptView.vue和EmpView.vue 中加路由链接组件
  1. App.vue 中加入路由展示组件
相关推荐
zhangwenwu的前端小站4 小时前
vue 对接 Dify 官方 SSE 流式响应
前端·javascript·vue.js
kkkkkkkkk_12014 小时前
【强化学习】06周博磊强化学习纲要学习笔记——第三课下
笔记·学习·强化学习
白杨SEO营销4 小时前
白杨SEO:看“20步:从0-1做项目的笨办法”来学习如何选一个项目做及经验分享
前端·学习
无所事事的程序员4 小时前
Claude指令学习
学习
学习路上_write5 小时前
AD5293驱动学习
c语言·单片机·嵌入式硬件·学习
叫我詹躲躲5 小时前
Vue 3 组件开发最佳实践:可复用组件设计模式
vue.js
叫我詹躲躲5 小时前
Vue 3 动画效果实现:Transition和TransitionGroup详解
javascript·vue.js
叫我詹躲躲5 小时前
别再用mixin了!Vue3自定义Hooks让逻辑复用爽到飞起
javascript·vue.js
文心快码BaiduComate5 小时前
Comate Spec模式实测:让AI编程更精准可靠
前端·后端·前端框架
菥菥爱嘻嘻5 小时前
组件测试--React Testing Library的学习
前端·学习·react.js