vue路由的基础知识总结，vueRouter插件的安装与使用

已于 2024-09-01 13:13:52 修改
阅读量1k 收藏 23
点赞数 28
分类专栏： vue2/3 从基础到起飞 文章标签： vue.js javascript 前端 前端框架 html5 vue ai
于 2024-05-29 08:56:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78542842/article/details/139275564
版权

本篇讲解一下vue关于路由的入门知识，以及vueRouter插件的安装与使用，对vue路由还不熟悉的小伙伴学起来吧~ 原创不易，需要的小伙伴收藏+关注 哦~

 💟 上一篇文章 vue系列之 插槽(Slot) 详解（热榜前十）

📝 系列专栏 vue从基础到起飞

目录

一、单页应用程序介绍

1.概念

2.具体示例

3.单页应用 VS 多页面应用

二、路由介绍

1.思考

2.路由的介绍

三、路由的基本使用

1.目标

2.作用

3.说明

4.官网

5.VueRouter的使用（5+2）

6.代码示例

7.两个核心步骤

四、组件的存放目录问题

1.组件分类

2.存放目录

了解本专栏 订阅专栏 解锁全文 超级会员免费看
码喽的自我修养
关注
专栏目录
订阅专栏
Vue-2 路由
qq_17368835的博客
07-08 248
本系列记录一些vue学习中的心得
vue2路由
weixin_56632577的博客
05-05 350
路由 路由(英文：route)就是对应关系， 路由分为前端路由和后端路由，比如前端路由就是，Hash 地址与组件之间的对应关系。 具体来说：一个路由就是一组key-value的对应关系 key 为 url 路径 value 可能是函数function 或 组件component 多个路由，需要经过路由器(英文：router)管理 后端路由 后端路由概念 理解：value 是 函数function, 用于处理客户端提交的请求。 工作过程：服务器接收到一个请求时，根据用户请求
vue2 路由入门
热门推荐
小钟不想敲代码
08-27 3万+
路由入门
Vue2 路由
每一个不曾起舞的日子，都是对人生的辜负。
02-01 380
示例程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="Vue-v2.5.22.js"></script&am
vue2——路由
最新发布
weixin_45691995的博客
07-15 2875
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！作用：让不展示的路由组件保持挂载，不被销毁。(组件不展示就会被销毁)实现切换（active-class可配置高亮样式）include=“name”,name指的是组件名。​ 作用：让路由组件更方便的收到参数。分类：全局守卫、独享守卫、组件内守卫。配置路由，声明接收params参数。实现路由跳转，让路由跳转更加灵活。作用：可以简化路由的跳转。作用：对路由进行权限控制。文件里面的内容复制到。
浅谈Vue.js路由管理器 Vue Router
10-18
然后，你可以通过Vue.use方法安装Vue Router插件。 ```javascript Vue.use(VueRouter); ``` 定义路由组件之后，你需要创建一个路由实例并传入路由配置。 ```javascript const router = new VueRouter({ routes /...
Vue.js路由组件vue-router使用方法详解
10-20
15. **安装vue-router插件**: 在使用vue-router之前，需要使用npm或yarn等包管理器安装vue-router包。使用时，需要先引入VueRouter，然后调用Vue.use(VueRouter)来注册路由功能。 这些知识点覆盖了从vue-router的...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
在这个"vue3.x+vite+ts+vue-router@4.x 路由使用demo"中，我们可以学习到以下关键知识点： 1. **Vue3 Composition API**：Vue3 引入了Composition API，允许开发者将逻辑组件化，提高了代码的复用性和组织性。在...
前端vue框架基础知识
06-11
### 前端Vue框架基础知识详解 #### 一、前端工程化与Webpack Webpack作为现代前端项目的工程化工具，提供了一系列的功能来简化前端开发过程，包括但不限于模块化开发支持、代码压缩混淆、处理浏览器端JavaScript的...
学习vue2教程中的简单路由
weixin_33787529的博客
03-03 115
这是实例的代码 作为一个新手，本文谈的是我在学习 vue-2.0-simple-routing-example 的一些理解。操作系统为 win7，以下： 环境部分 下载好程序包后，解压到任意的盘，假设 e 盘。然后打开 cmd,跳往项目路径，输入 cd e:\vue-2.0-simple-routing-example-master 回车...
Vue2.路由
切图仔
04-27 4003
前端路由（Hash 地址与组件之间的对应关系） SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 1.前端路由的工作方式 ① 用户点击了页面上的路由链接 ② 导致了 URL 地址栏中的 Hash 值发生了变化 ③ 前端路由监听了到 Hash 地址的变化 ④ 前端路由把当前 Hash 地址对应的组
vue2-路由
weixin_50402587的博客
05-31 404
在方法里面跳转页面 vue的路由模式? hash history hash模式会在url上显示’#'，而history模式没有 刷新页面时，hash模式可以正常加载到hash值对应的页面，history模式没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由 兼容性上，hash模式可以支持低版本浏览器和IE== vue-Router中有哪些导航守卫?== 「全局前置钩子」：beforeEach,beforeResolve,afterEach 「路由独享守卫」：beforeEnter
Vue2 路由（最最详细简单易通）看这篇就够了
2301_77638787的博客
08-16 6851
Vue2 路由（最最详细简单易通），帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。
Vue2路由的使用 vue-router
m0_62508027的博客
05-12 4579
对vue2中vue-router的使用，简单总结
Vue2路由的详细讲解
zxdznyy的博客
10-22 1万+
在之前的原生学习中，一个项目通常会有一个主页，index.html，以及很多个分页。想要通过主页去往其它页面，大部分情况我们使用链接a标签。但是在vue中，vue大多开发单页面应用，也就是SPA项目，倘若想要在SPA项目中看到多个组件，则需要凭借路由。本篇博客就针对路由进行全面讲解，希望对大家有帮助！前面四节讲述的是如何用router-link来渲染组件，这种方式叫做声明式导航，在浏览器中，点击链接实现导航的方式，叫做声明式导航。而编程式导航，则是调用API方法进行导航。
VUE基础-伍
qq_46263740的博客
02-25 534
路由 前端路由的概念和原理 1、声明是路由 路由（英文：router）就是对应关系 2、SPA与前端路由 SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由实现。 结论：在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成！ 3、声明是前端路由 通俗易懂的概念：Hash地址与组件之间的对应关系。 4、前端路由的工作方式 用户点击了页面上的路由链接 导致了 URL 地址栏的 Hash 值发生了变化 前端路由监听
vue2项目的路由
m0_69889435的博客
08-10 763
vue2项目的路由使用
Vue学习精华：路由、Vuex与图片上传插件封装
资源摘要信息:"vue学习随记.zip_vue_vuex_vue学习知识点笔记_图片上传插件封装" 本文档聚焦于Vue.js的深入学习和应用，主要记录了Vue.js核心库、Vuex状态管理库以及图片上传插件封装的相关知识点和学习随记。文档...
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码喽的自我修养

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值