前端框架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 中加入路由展示组件
相关推荐
dadaobusi2 小时前
学习: PCIe 6.0 的 L0p
学习
燕落南枝4 小时前
CSS 学习:类型选择器与 AI 注释实战
css·人工智能·学习
ClouGence8 小时前
Playwright 热门替代方案:Cypress、Selenium、CueCast 等 7 款自动化测试工具
前端框架·开源·测试
Swilderrr8 小时前
论文精读:《Directory-Aware Query and Maintenance in Vector Databases》
笔记·学习
kkkkkkkkkk_Z8 小时前
新手自学嵌入式 | 学习日记:LCD显示原理、PWM控制、电容触摸屏(GT9147)驱动开发与项目实战
驱动开发·学习
Java后端的Ai之路9 小时前
前端技术Vue-09-webpack-vuejs-实战
前端·vue.js·webpack
LXT7129 小时前
每日英语一读|为什么夏天的雷雨,总爱在傍晚出现?
深度学习·学习
知识分享小能手9 小时前
C学习教程,从入门到精通,C语言文件 — 完整知识点详解(14)
c语言·网络·学习
羊羊一洋10 小时前
ROM&RAM
c语言·stm32·学习
时间的情敌10 小时前
《回顾 2019 前端:React Hooks 问世,前端工程化爆发的一年》
前端·react.js·前端框架