VUE学习笔记-路由使用

最新推荐文章于 2024-01-10 16:20:39 发布
最新推荐文章于 2024-01-10 16:20:39 发布
阅读量152 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35455562/article/details/89535940
版权

路由的指令：router-view 视图 router-link 导向

在这里插入图片描述

路由规则的制定

  1. routes 定义为一个数据，可包含多个配置
  2. path: 根目录里面，路径必须带"/" 在子目录里面，不用带"/"
  3. component：组件名称，即组件的对象

在这里插入图片描述

路由的加载

  1. 将定义好的router对象，与router属性进行绑定就可以了

在这里插入图片描述

路由的嵌套，在于router-view 所绑定的组件里面，再绑定router-view

然后，在规则里指定父规则及子规则就可以了
在这里插入图片描述
在这里插入图片描述

路由可以一对多，即同一个地址，对应多个component

  1. 使用components来指定多个组件名称
  2. 使用在router-view上面定义name 来对应到相应的组件

在这里插入图片描述

qq_35455562
关注
vue学习笔记，学习vue从0-1的步骤
09-21
Vue.js 是一个流行的前端...学习Vue.js从0到1的过程通常包括理解上述概念，练习创建简单的组件和路由，然后逐渐深入到Vuex状态管理和与其他后端服务的交互。通过实际项目来实践这些知识，将有助于加深理解并提升技能。
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
在实际开发中，还可以使用 Vue Router 的高级功能，比如嵌套路由、动态路由匹配、路由守卫等，以满足复杂的应用场景需求。 总的来说，Vue Router 是 Vue.js 应用不可或缺的一部分，它提供了强大的路由管理功能，让...
Vue学习笔记-路由的基本使用
theLuckyLong的博客
11-30 1424
实现组件切换，在App.vue中编写如下内容(active-class类用于动态地为选中的标签添加样式)在src路径下创建router文件夹，并创建index.js文件，该文件用于配置路由规则。在main.js中导入vue-router模块，并且使用vue-router插件。vue2 要下载vue-router3。vue3 要下载vue-router4。指定展示切换的组件的位置。
Vue学习笔记-命名路由
theLuckyLong的博客
11-30 333
如何理解：相当于给路径起别名。来解析js对象，对象中声明。使用命名路由时,要使用。
Vue学习笔记-缓存路由组件
theLuckyLong的博客
12-04 209
让不展示的路由组件保持挂载，不被销毁。在需要缓存的路由组件。
vue学习笔记-路由（15）
键指江湖的博客
09-17 205
vue路由 1.安装vue-router npm install vue-router --save 或者 cnpm install vue-router --save 安装成功后在node_modules文件可以看到vue-router文件 步骤如下代码： //引入vue-router并use import VueRouter from 'vue-router'; Vue.use(Vu...
【Vue】学习笔记-路由
weixin_49202767的博客
02-28 1526
【Vue】学习笔记-路由路由概述创建包括路由模块的Vue项目配置router.js文件编程式导航导航守卫常见错误总结 路由概述 一个Web应用应该有多个页面，之前学习的Vue案例都是在一个页面完成的，通过路由，可以让应用在多个页面间跳转（严格的说Vue是单页面应用，所以跳转的不是其他页面，而是其他组件）。本文将会讲解路由的常用功能 创建包括路由模块的Vue项目 首先使用下面命令创建一个带路由的项目: vue create RouterProject ├─src │ └─assets │ │ └─logo.
Vue学习笔记五--路由
铁马冰河入梦来
01-10 487
Vue路由使用
前端学习笔记-vue2-路由
qq_43128157的博客
01-26 621
vue2-路由路由概念vue-routerSPA路由概念路由分类基本路由嵌套（多级）路由路由传参query参数params参数命名路由路由的props配置router-link的replace属性编程式路由导航缓存路由组件路由组件独有的两个新的生命周期钩子路由守卫全局守卫独享守卫组件内守卫路由器的两种工作模式hash模式history模式 路由 概念 vue-router vue的插件库，专门用来实现SPA应用 SPA 单页Web应用 整个应用只有一个完整的页面 点击页面的导航链接不会刷新页面，只
Vue学习笔记-路由专题
我的博客
05-15 897
17、路由： 基本： 导航，默认显示为，但也可以指定tag=“span”等，to=“【路径】”、加载跳转的内容 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
【Vue】学习笔记-Vue Router activated deactivated 路由守卫
德仔
06-16 1476
activated 和 deactivated 是路由组件所独有的两个钩子，用于捕获路由组件的激活状态。分类：全局守卫、独享守卫、组件内守卫。作用：对路由进行权限控制。
vue学习笔记-路由嵌套（19）
键指江湖的博客
09-20 166
vue路由嵌套 实现目标：新增一个用户中心页面；页面左侧为菜单栏，点击菜单右边内容区变化，如下图： 1.新建组件，如下图 2.引用组件 在main.js里面配置好。代码如下： 3.在App.vue加上链接，让用户页面打开默认显示useradd组件的内容，如果是to="/user"打开用户页面时会是空白 4.user组件左侧li添加路由切换，right为内容展示区，代码如下； 运行效果如下...
vueSourceCodeLearning:vue原始码学习笔记-vue source code
03-24
"vueSourceCodeLearning:vue原始码学习笔记-vue source code" 这个资源很可能是包含了作者在研究Vue.js源码过程中整理的笔记和理解，这对于开发者来说是一份宝贵的资料。 Vue.js的设计思想是组件化，它将复杂的Web...
基于H5的宿舍管理系统.zip
11-09
基于SSM的毕业设计源码
CSP-J历年复赛真题资源.txt
最新发布
11-09
CSP-J历年复赛真题资源.txt
【激光雷达】激光雷达数据处理（点云数据滤波、误差分析、模型验证、三维表面拟合）【含Matlab源码 9065期】.mp4
11-09
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
macOS_Sequoia_15.1.password(imacos.top).rdr.split.012
11-09
macOS_Sequoia_15.1.password(imacos.top).rdr.split.012
高分springboot毕设+vue的校园社交平台_jdl-Java源码.zip
11-09
本项目是一个基于Spring Boot和Vue的校园社交平台，旨在为高校学生提供一个便捷、高效的社交互动环境。项目源码涵盖了前后端完整开发流程，适合计算机相关专业学生进行毕业设计，同时也为Java学习者提供了实战练习的机会。 在功能方面，该平台支持用户注册与登录、个人信息管理、好友添加与聊天、动态发布与评论、兴趣小组创建与加入等功能。通过这些功能，用户可以在平台上轻松找到志同道合的朋友，分享学习和生活中的点滴，参与各类兴趣小组的活动，丰富校园生活。 技术框架方面，后端采用Spring Boot框架，实现了快速开发和部署，提供了稳定的服务支持。前端则使用Vue框架，实现了友好的用户界面和流畅的用户体验。前后端通过RESTful API进行数据交互，保证了系统的安全性和可扩展性。 开发此项目的目的在于帮助学生更好地掌握Java Web开发技能，理解前后端分离的开发模式，同时为校园社交提供一个便捷的平台。
基于MATLAB的人脸识别程序
11-09
基于MATLAB的人脸识别程序
"前端Bootstrap Es6 vue学习笔记-基础环境配置和样式排版
通过路由来实现单页面应用的页面切换------------前端Bootstrap Es6 vue学习笔记，内容围绕着前端开发的三大核心技术：Bootstrap、Es6和Vue.js展开。 首先，介绍了Bootstrap框架的基础环境配置。通过开发者工具的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值