第七章：vue路由

  • 开发
  • 53

第七章：vue路由

下面我们由开启了一个新的页面，我们新增了一个部门管理的页面
在这里插入图片描述

我们就要实现下面的功能
在点击部门管理时显示部门管理的页面
在点击员工管理时显示员工管理的页面
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第一步
这里我们不需要安装，因为我们在创建这个vue项目的时候
已经勾选了router选项
在这里插入图片描述

第二步
我们需要配置DepView.vue和EmpView.vue这两个配置下的信息
在这里插入图片描述

下面这样就配置好了
在这里插入图片描述

在main.js中已经导入了router
而且在创建vue对象的时候已经指定了路由
在这里插入图片描述
在这里插入图片描述
我们要改变下面的菜单
在这里插入图片描述

这个是dept页面
在这里插入图片描述

emp页面同样需要改造
在这里插入图片描述
此时就有了超链接的效果
在这里插入图片描述

下面我们要在对应的区域加上标签< router-view></ router-view>，来指定我们要动态展示哪一个组件
我们在App.vue中加上这个标签
在这里插入图片描述
还有一个问题
我们关闭工程在打开浏览器，发现浏览器一片空白
因为默认访问路径为 / ,而系统配置的只有两个/emp和/dept
在这里插入图片描述
下面我们再配置一下根路径，redirect表示重定向
在这里插入图片描述

阅读全部

相关推荐

  2. 第22章-路由协议概述

    2024-01-20 13:34:02       30 阅读

  3. 第20章-IP路由原理

    2024-01-20 13:34:02       34 阅读

  4. 第五章 静态路由

    2024-01-20 13:34:02       31 阅读

  8. 第4章 Express路由的深入理解(一）

    2024-01-20 13:34:02       22 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-20 13:34:02       94 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-20 13:34:02       100 阅读

  9. 在Django里面运行非项目文件

    2024-01-20 13:34:02       82 阅读

  19. Python语言-面向对象

    2024-01-20 13:34:02       91 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-01-20 13:34:02       85 阅读

热门阅读

  4. C++入门学习（四）常量

    2024-01-20 13:34:02       58 阅读

  8. Jira REST API_创建共享配置的Jira项目

    2024-01-20 13:34:02       48 阅读

  11. 从0开始python学习-50.pytest之多接口用例封装

    2024-01-20 13:34:02       55 阅读

  12. 【笔记】Helm-3 主题-7 使用基于OCI的注册中心

    2024-01-20 13:34:02       50 阅读

  16. 【ARMv8M Cortex-M33 系列 7.3 -- EXC_RETURN 与 LR 及 PC 的关系详细介绍】

    2024-01-20 13:34:02       59 阅读

  17. Webpack5入门到原理2：基本使用

    2024-01-20 13:34:02       47 阅读

  18. 代码随想录算法训练营第六天| 242 有效的字母异位词 349 两个数组的交集 202 快乐数 1 两数之和

    2024-01-20 13:34:02       53 阅读

  25. 什么是vue的sync语法糖如何使用

    2024-01-20 13:34:02       51 阅读

  28. 技术分享：PHP读取TXT文本内容的五种实用方法

    2024-01-20 13:34:02       50 阅读