前端框架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 中加入路由展示组件
相关推荐
数据与后端架构提升之路25 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
一行134 分钟前
电脑蓝屏debug学习
学习·电脑
Gavin_91537 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
星LZX1 小时前
WireShark入门学习笔记
笔记·学习·wireshark
阑梦清川1 小时前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展
qq_433099401 小时前
Isaac Gym学习笔记——概述
学习
秃头佛爷3 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
dayouziei5 小时前
java的类加载机制的学习
java·学习
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子7 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js