vue-router 前端路由介绍和使用

已于 2022-11-22 15:01:13 修改
阅读量437 收藏
点赞数 1
分类专栏： Vue学习笔记 文章标签： 前端 vue.js javascript
于 2022-11-22 11:29:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lightoneone/article/details/127971683
版权
本文介绍了前端路由的概念，详细讲解了如何在Vue.js应用中使用vue-router，包括插件安装、路由组件创建、配置路由、路由懒加载以及常见问题解决，特别提到版本不兼容时应选择稳定版本vue-router@3.5.2。
摘要由CSDN通过智能技术生成

什么是前端路由？

hash值和组件之间的对应关系，当url中的hash值发生改变时，前端路由会检测到，这时路由会把当前hash值所对应的组件渲染到页面上。

怎么使用？

非路由组件的使用

非路由组件一般放置在components文件夹中，在使用的页面先引入组件，再进行注册，如下图所示，在app.vue中引入HelloWorld组件

路由组件的使用

1.vue-router插件的安装

npm install --save vue-router

 2.创建路由组件

在src下新建文件夹views用来放路由组件，home和login为新建路由组件

3.配置路由

（1）在src下新建router文件夹

最低0.47元/天 解锁文章
lightoneone
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在vue-cli脚手架中配置一个vue-router前端路由
08-30
"在vue-cli脚手架中配置一个vue-router前端路由" 在本文中，我们将详细介绍如何在 vue-cli 脚手架中配置一个 vue-router 前端路由。首先，我们需要了解什么是 vue-router，以及它在前端路由中的作用。 vue-router ...
前端路由（v-router）
m0_60782710的博客
04-03 5408
1.什么是路由 路由（英文：router）就是对应关系 2.什么是前端路由 通俗易懂的概念：Hash地址（就是之前理解的锚链接）与组件之间的对应关系 而hash地址指的就是锚链接后面的值举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
vue纯前端设计动态路由+页面架构
echo_Ae的博客
03-11 3127
前言 好久没有更新博客了，今天就写一下vue脚手架+antd如何架构一个后台管理系统页面，本来是想弄微前端的但是想想还是算了，不过你熟了的话，可以使用微前端进行架构，基于主体布局不变嵌入微前端。 上图 还行，不过有很多细节没有处理好。不过作为一个参考模型是足够了，我的写偏向简单，看一遍就会了 开始 这里我就主要讲两块（页面架构、路由设计） App.vue ps：这里添加一个路由组件(一级页面需要) <template> <div id="app">
vue-router使用
前端学习博客
02-14 3756
vue-router 文章目录**vue**-router(一)基本使用**简单案例****创建router实例****挂载到Vue实例中****步骤一：创建路由组件****步骤二：**配置组件和路径的映射关系**步骤三：**使用路由.**最终效果如下**(二)细节处理1.路由重定向(redirect)2.history模式3.router-link补充4.**路由代码跳转**5.**动态路由**(三)**路由的懒加载****懒加载的方式**(四)**嵌套路由**(五)**传递参数**参数分类**传递参数方
vue-router入门篇一
wolflxiaolu的博客
07-12 282
vue-router在vite下如何简单搭建启动 最后，启动即可。
Vue--项目创建及Router作用
weixin_64227680的博客
11-29 354
第三步：选择项目设置， 按上下键切换 按空格键选择或者取消选择 ，选择Babel,Router,Vuex,CSS Pre-processors然后按回车键。第五步：选择history模式 如果是就输入Y 如果不是 那就是选择了hash模式 那么就输入n，我们选择history模式输入n ，回车。第七步：选择设置存放，询问你是把设置另外放在一个文件夹里 还是放在package.json文件夹里，回车。是否把刚刚的设置都保存下来 ，如果输入Y 表示要存储这些设置， 下一步就给这些设置取个名字。
基于vue-router 多级路由redirect 重定向的问题
10-18
在前端开发中，Vue.js 框架因其简洁的设计和高效的性能被广泛使用。Vue-router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。在实际项目中，路由的配置和重定向操作非常常见，尤其是在处理多级路由时，...
详解vue-router 命名路由和命名视图
08-27
Vue-Router 是一个流行的前端路由库，它提供了许多强大的功能来帮助我们管理应用程序的路由。其中，命名路由和命名视图是两个非常重要的概念，本文将详细介绍这两个概念的实现和应用。 一、概述 在 Vue-Router 中...
vue-router(路由)
qq_33879627的博客
09-28 559
（十七）vue-router 17.1 路由简介 什么是路由？ 路由就是通过互联的网络把信息用源地址传送到目的地的活动 路由提供了两种机制：路由和传送 路由是决定数据包从来源到目的地的路径 转送就是将数据转移 路由表 路由表本质就是一个映射表，决定了数据包的指向 17.2 前端/后端路由 后端渲染（服务端渲染） jsp技术 后端路由，后端处理URL和页面映射关系，例如springmvc中的@requestMapping注解配置的URL地址，映射前端页面 前后端分离（ajax请求数据
Vue进阶——Vue Router（路由）
秋书一叶的博客
04-26 6312
Vue Router 是 Vue.js 官方提供的路由管理器。它和 Vue.js 核心深度集成，可以方便地在 Vue.js 应用中使用路由功能，支持基于 HTML5 History API 的单页应用 (SPA) 以及传统的多页应用程序 (MPA)。使用 Vue Router 可以实现在单页应用中切换页面而不刷新页面，同时还支持路由参数、路由组件、嵌套路由等高级功能，方便开发者构建复杂的前端应用。
Vue项目的详细目录结构解析
ATCO[这里，只是顺手插曲]
09-19 4154
在创建项目时，如果你选择把依赖的配置信息以独立文件形式存放，那么你的项目内，和package.json文件同级的，就还会有比如.browserslistrc， .eslintrc， babel.config.js， jest.config.js， tsconfig.json等独立配置文件。而我们现在使用的Vue.js等框架开发的项目，并不能为浏览器所识别，所以就需要编译打包这一步操作，来转换成实际生产环境（浏览器）所需的文件。这个也没什么好说的，也就是罗列一下，之后Git上传时，需要忽略的文件。
vue-router安装和使用
cqzdmm的博客
02-08 4525
vue-router安装和使用
Vue-router 的简单配置及使用
qq_28059167的博客
04-27 3502
这里写自定义目录标题安装引入 安装 如果你的脚手架尚未安装vue-router请使用以下代码进行安装： npm install vue-router --save 引入 1、在main.js中引入: import router from ‘./router’; new Vue({ render: h => h(App), router }).$mount(’#app’) 2、在src文件夹中...
项目前端（一）、vue项目中引入vue-router路由组件
xiaoixn5的博客
04-27 1578
是否成功引入router路由组件，我们可以查看package.json文件中dependencies标签下是否有vue-router内容，如果有表示引入成功。在文件vue.config.js中添加 lintOnSave: false。
Vue项目中路由Router文件夹中的index.js文件的介绍和配置方法
最新发布
JLY19970726的博客
04-16 1379
你可以根据需要添加任意多的路由配置对象，每个对象都代表应用中的一个视图或页面。如果某个路由需要更复杂的配置（如子路由、路由守卫、重定向等），你可以在相应的路由配置对象中添加更多的属性和方法。在上面的代码中，我们首先导入了Vue和Vue Router，并且告诉Vue我们要使用Vue Router插件。，如果使用TypeScript）文件，该文件是配置和初始化路由的地方。最后，这个配置好的Router实例被导出，以便在Vue应用的其他部分（如。在Vue项目中，特别是使用Vue Router时，
vue之vue-router，路由、多级路由、路由传参【SPA实现】
weixin_42390185的博客
10-23 1873
一、vue-router插件的安装 在工程目录下的终端执行以下命令 npm i vue-router 二、vue-router的基本使用【单级路由】 1、index.js路由配置文件 在src文件夹下新建router文件夹，并创建inedx.js文件 注意：我这里导入的两个路由组件我将它们放置了pages文件夹下。作用：将路由组件与一般组件区分 // 用于创建整个应用的路由器 import VueRouter from "vue-router"; // 引入组件（一级路由） import Ab
vue配置文件说明+路由vue-router使用
caigoutu的博客
06-12 2841
vue配置文件说明+路由
Vue---路由
qq_45954420的博客
03-07 712
一、相关理解 1.路由就是一组key-value的对应关系 多个路由，需要经过路由器的管理 一个路由就是一组映射关系（key-value） key为路径，value可能是function或component 路由分类: 后端路由： 理解：value是function，用于处理客服端提交的请求 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求， 返回响应数据 前端路由： 理解：value是component，用于展示页面内容 工作过程...
Vue开发：深入理解vue-router前端路由原理与实践
"Vue学习之旅Part9：使用vue-router实现前端路由和参数传递" 在本文中，我们将探讨Vue.js框架中的前端路由管理和参数传递，主要使用官方插件vue-router。首先，我们理解路由的基本概念，它是URL到功能的映射，根据...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值