前端框架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 中加入路由展示组件
相关推荐
悠哉悠哉愿意4 小时前
【数学建模学习笔记】机器学习分类:KNN分类
学习·机器学习·数学建模
四谎真好看4 小时前
Java 学习笔记(进阶篇2)
java·笔记·学习
程序猿炎义5 小时前
【NVIDIA AIQ】自定义函数实践
人工智能·python·学习
小陈phd5 小时前
高级RAG策略学习(四)——上下文窗口增强检索RAG
人工智能·学习·langchain
Jayyih6 小时前
嵌入式系统学习DAY28(网络编程)
网络·学习·tcp/ip
dbdr09016 小时前
Linux 入门到精通,真的不用背命令!零基础小白靠「场景化学习法」,3 个月拿下运维 offer,第二十六天
linux·运维·服务器·网络·python·学习
大白的编程日记.7 小时前
【Linux学习笔记】信号的深入理解之软件条件产生信号
linux·笔记·学习
buyutang_7 小时前
C/C++ Linux系统编程:线程控制详解,从线程创建到线程终止
linux·c语言·c++·学习
yzx9910137 小时前
图像去雾:从暗通道先验到可学习融合——一份可跑的 PyTorch 教程
人工智能·pytorch·学习
quan26317 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js