vue--6.3 单文件组件与Vue中的路由

最新推荐文章于 2025-09-17 10:34:45 发布
原创 最新推荐文章于 2025-09-17 10:34:45 发布 · 290 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue

这篇博客介绍了Vue项目的整体流程，强调了main.js作为入口文件的角色。重点讲解了单文件组件（.vue）的概念，并探讨了Vue中的路由机制。路由通过router文件夹下的index.js进行配置，当访问不同网址时，显示不同的内容。例如，访问根目录时会展示HelloWorld组件。此外，还提到了如何在App组件中渲染模板，以及使用ES6写法启动Vue项目的方法。

整体流程在这里插入图片描述main.js 是入口

+ el限定的范围就是index.html文件下的id为app的div

在这里插入图片描述
在这里插入图片描述文件以.vue结尾叫作单文件组件在这里插入图片描述

路由

根据网址的不同，返回不同的内容给用户在这里插入图片描述router是路由，来自同一文件下的router文件，即router文件下的index.js
index.js也是一个组件，当访问根目录时，会访问到组件HelloWorld
HelloWorld来自src文件夹下的HelloWorld
HelloWorld下面是一个模板
路由的配置都放在router的index.js下面
在这里插入图片描述
定义了一个叫App的局部组件，模板里直接将App组件渲染出来
在这里插入图片描述
ES6写法：在这里插入图片描述
实际是省略了一个App,即在这里插入图片描述
在这里插入图片描述
因为在ES6内,如果键值是一样的，只要写一个就可以了

运行：Travel的文件夹下 npm run dev =》尝试启动vue项目

vue-router实现原理、理论知识和实践详情
大模型大数据攻城狮的专栏
07-04 989
这一章咱们将深入Vue Router的源码（基于4.x版本），剖析它的核心实现逻辑，从路由初始化到导航流程，再到组件渲染。别担心，我会用通俗的语言带你啃这块硬骨头，配上代码片段和注释，让你既能看懂源码，又能把思路用到自己的项目里！不过，它实现起来比Hash模式复杂点，咱们来一探究竟。比如，路由规则/user/:id会被转成正则^/user/([^/]+)，其中[^/]+匹配任意非斜杠字符，提取为参数id。Vue Router的核心任务是监听URL变化，然后根据配置的路由规则，动态渲染对应的组件。
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 4561
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
【Vue2】06 - vue路由和VueRouter
qq_43350524的博客
04-29 1074
【Vue2】06 - vue路由和VueRouter
（六）vue-router+UI组件库
释怀°Believe的博客
08-30 655
路由
Vue-Router4 学习笔记
zep
03-04 996
一、URL的hash 前端路由是如何做到URL和内容进行映射呢？监听URL的改变。 URL的hash也就是锚点(#), 本质上是改变window.location的href属性； 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新； hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。 二、HTML5的History 三、认识vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.j
electron-vue路由配置：vue-router在桌面应用中的最佳实践
最新发布
gitblog_00250的博客
09-17 674
你是否在Electron桌面应用开发中遇到过这些问题：路由跳转时窗口闪烁、应用打包后路由失效、多窗口路由状态不同步？本文将系统讲解如何在electron-vue框架中配置vue-router，解决这些痛点，实现流畅的桌面应用导航体验。 读完本文你将掌握： - 基础路由配置与项目集成方法 - 多窗口应用的路由状态管理 - 路由权限控制与导航守卫实现 - 开发环境与生产环境路由差异处理 - 性能优化...
vue2学习 -- 路由
2302_79523175的博客
08-09 1359
缓存路由组件时，正好其组件内部存在定时器或者其他的东西，当失去对这个组件的关注时，我们希望将定时器暂时关闭且不销毁组件，那么就需要使用到。特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！注：一般在设置路由时设置meta属性，保存该路由是否需要经过校验，或者更换页面的title(后置路由守卫)解决history模式舒心出现404问题。作用：让路由组件更方便的收到参数。独享路由守卫 – 对某个路由设置。全局前置 / 后置守卫是。这里的两个守卫分别是。
vue-router
jkjkikik的博客
07-30 1213
1.问题router-link的两个高亮类名 太长了，我们希望能定制怎么办2.解决方案我们可以在创建路由对象时，额外配置两个配置项即可。linkActiveClass和linkExactActiveClasslinkActiveClass: "类名1",linkExactActiveClass: "类名2"})示例// 创建了一个路由对象routes: [...],linkActiveClass: 'active', // 配置模糊匹配的类名。
Vue-Cli搭建Vue项目及使用
2301_78158568的博客
07-16 1317
cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。node.js提供了前端程序的运行环境，可以把node.js理解成是运行前端程序的服务器。解决方案: 以管理员身份启动idea,打开项目运行。
【VUE基础】Vue-Router
Robin的博客
10-18 1179
路由就是通过互联的网络把信息从源地址传送到目的地的活动路由提供了两种机制：路由和传送。
基于springboot，ant-design-vue-pro的简易后台管理系统.zip
02-22
3.1 Ant Design Vue：Ant Design的Vue实现，提供了一系列与React版本相类似的高质量UI组件。 3.2 Pro版本：Ant-Design-Vue-Pro是其企业级的解决方案，包含完整的后台管理系统模板，包括登录、权限控制、多语言等功能...
《Vue入门到精通系列之五》--- vue-router详解_vue-router beforeeach和aftereach
2401_85158697的博客
07-12 955
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。
HTML引用外部css的路径
热门推荐
Ada_lake的博客
05-08 1万+
HTML引用外部css，其实说简单点就是 href 内填入路径即可 然而今天感觉自己之前都有点。。没引入进来就试出来的赶脚。。。 索性就把情况都归纳一下 1. html,css 在同一文件夹下 直接引用css的名字即可，因为在当前路径之下 2. html,css 在同一文件夹下 ，但！css在该文件夹的子！文件夹下 在引用css的名字前加上子文件夹名字即可，相当于顺着找就能找出这个css ...
uniapp -- 调用其他js
Ada_lake的博客
06-12 6280
步骤 保证要引入的js是模块化的 export default 模块导出 import XXX from ‘./common/XXX.js’ export 模块导出 import {XXX} from ‘./common/XXX.js’ commonjs、adm、cmd模块 模块化是什么 把系统分离成独立功能的方法，需要什么功能就加载什么功能 相互独立+可重复使用 ES6模块 – 用于浏览器环境【export+import】 1. 定义模块 – 输出模块 export default {name: 'X
响应式网页的字体大小呀~~~
Ada_lake的博客
11-05 5431
最近用响应式网页，会发现如果你将网页每个需要用的地方字体大小设为多少PX时，很有可能缩小页面字体会因为网页而出现排版不太好看的问题 这个时候。。。 如果你把font-size:不设为PX就好了嘛！ 那设为什么呢？大部分地方都会设为多少em，原谅我太懒，不想拿着计算器噼里啪啦。 那就设为rem好了。 rem是指根元素的字体大小，em是指父级元素字体的大小。 当把html{ font-
vue--解决多个页面之间滚动互相影响的问题
Ada_lake的博客
09-03 4701
页面在点击跳转到新页面时可能会出现: 新页面的当前所在位置是原页面滑动到的位置，影响用户体验 解决方案 https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html router 内添加 scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } ...
Eslint
Ada_lake的博客
06-01 3389
这里写自定义目录标题Eslinteslinteslint是什么为什么需要怎么用初始化启动 Eslint eslint eslint是什么 插件化的JS代码检测工具 为什么需要 JS是弱类型语言，开发过程中容易出错。Eslint可以在编码中发现问题而不是执行时。 怎么用 初始化 安装 npm install eslint 设置lint规则 新建一个.eslintrc文件，手写配置项 直接在 package.json 文件里的 eslintConfig 字段指定配置 输入init命令，选择相关配置项后自动生
Js 经典案例
Ada_lake的博客
04-22 3356
1. 选项卡切换 思路 - 1. 查找到选项卡元素 - 2. 对选项卡里的每个button都设置监听事件 - 3. 找到事件发生的button - 4. 先清除选项卡内激活的按钮 - 5. 为现在触发的按钮添加active类 * 清除激活按钮的 active类 + 1. 通过active查找到 激活的按钮 + 2.判断如果存在这样的按钮 + 3. 将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值