vuecli3文件项目结构分析，及路由结构分析

最新推荐文章于 2024-08-13 11:18:03 发布
最新推荐文章于 2024-08-13 11:18:03 发布
阅读量3.7k 收藏 6
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61169066/article/details/123369608
版权
本文分析了VueCLI3的项目结构，指出app.vue作为页面基础，main.js负责项目入口，不处理业务逻辑，而router作为页面管理中介。在路由结构分析中，详细解释了router/index.ts中的RouteRecordRaw数组，包括path、name和component属性，并提及了webpackChunkName的作用和createWebHashHistory路由模式。
摘要由CSDN通过智能技术生成

 

 

 

 项目分析

1.app.vue是页面的根本，

2.在main.js中引入页面的根本（但是不知道页面是干啥的，所以注入所有依赖，将所有依赖挂载到#app上面）

3.public中的index就会通过id=“#app”调用

所以说main.js只负责项目入口工作，不执行逻辑。所有的逻辑都是app.vue执行

main.js与app.vue相互对接工作，主要router来进行中介，router负责页面统一管理&

最低0.47元/天 解锁文章
被窝是圆的
关注
vue3 使用vue-router
天天的博客
12-08 4985
这个步骤，我给大家 1，安装 npm i vue-router@next --save 2, main.js 中 import { createApp } from 'vue' import App from './App.vue' import {createRouter,createWebHashHistory} from "vue-router" import rongrong from "./components/rongrong.vue" import HelloWorld fr..
vue3中的RouteRecordRaw
m0_59006402的博客
05-09 7721
是 Vue Router 4.x 中新增的类型，用于定义路由配置。它是一个 TypeScript 类型。只是一个类型定义，它并不会自动注册路由。要将其注册到 Vue Router 中，还需要使用。函数创建路由实例，并将路由记录传递给该实例的。
学习vue Router 一 起步，编程式导航，历史记录，路由传参
最新发布
tian_liang_jia的博客
08-13 1066
这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为。1为history模式，原理是调用h5的history方法，2为hash模式，原理为调用location.hash进行跳转。query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效。，但是在history中其不会重复保存记录，而是替换原有的vue组件；
vue3扩展RouteRecordRaw属性
九段刀客的博客
05-10 1488
在根目录 env.d.ts中添加。
vue路由笔记
m0_51134729的博客
04-11 5545
vue路由笔记路由1. 安装2. 入门2.1 根组件2.2 创建组件2.3 编写路由2.4 挂载路由2.5 使用路由2.6 route 和 router 的区别3. 路由模式3.1 hash模式3.2 history模式4. 命名路由4.1 介绍4.2 使用5. 编程式导航5.1 字符串模式5.2 对象模式5.3 命名路由模式5.4 替换当前位置5.4.1 router-link5.4.2 编程式导航5.4.3 横跨历史 路由 1. 安装 执行如下命令来安装 npm install vue-router@4
vue3.0vue-router在3.0版本以上element ui导航栏重复点击报错解决办法
dmedaa的博客
09-26 463
Vue.js 项目控制台报错： Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/user/student". 问题原因：多次点击跳转同一路由是不被允许的（版本原因） 解决方案： 方案一、切换版本回到3.0 使用npm运行的切换版本命令 npm i vue-router@3.0 -S #npm命令 使用yarn运行的切换版本命令 yarn
vue-cli入门之项目结构分析
08-30
在本文中，我们将深入理解 Vue CLI 创建的项目结构及其核心组成部分。 ### 1. 项目总体框架 Vue CLI 生成的项目结构大致如下： - `build`：包含了 Webpack 配置，如 `dev-server.js`，它是开发服务器的启动文件，...
vue-cli3+typescript新建一个项目的思路分析
10-16
vue-cli3在项目结构上的变化之一是将路由和状态管理store的配置文件由文件夹改为了单独的文件。这使得项目结构更为简洁，也有利于新手更容易理解和上手。同时，webpack的配置文件被隐藏起来了，不再直接暴露给用户，...
03-vuecli3.rar
11-06
Vue CLI 3 生成的项目有标准的目录结构，包括 `src`（源代码）、`public`（静态资源）、`node_modules`（依赖库）、`package.json`（项目配置文件）等。 ### Vue Router Vue Router 是官方的路由管理器，可以在 Vue...
解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
weixin_46096901的博客
12-28 165
/** * 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 */ const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }``` ![在这里插入图片描述](https://img-blog.cs
Vue项目的详细目录结构解析 vue-cli
weixin_49827467的博客
02-15 1866
vue-cli 目录详解
vue3_vue-router
qq_45104829的博客
07-25 550
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问。将显示与 url 对应的组件。
vue学习总结四：理解vue-router
Buddha_ITXiong的博客
07-16 1263
我们知道vue项目都是单页面应用，只有一个index.html文件，但是页面之前的跳转是依赖什么呢，vue提供了一个vue-router插件帮助我们实现页面之间的相互跳转，接下来我会重新改造一下之前的那个yourprojectname项目，新建四个页面:主页---->列表页---->详情页---->个人中心页  来帮助大家简单的了解一下router用法首先我会清空项目中之前写的那...
vue3 路由的使用
热门推荐
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
8. vue-router
ximingx
05-06 568
8. Vue-router vue-router 它是一个Vue.js官方提供的路由管理器。 Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。 Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router 在了解 vue-router 之前先引入一个前端路由与后端路由的知识, 至少在之后的 Node.js 的学习中是有帮助的 简单地说 将路径和组件映射。 在vue-router
vue-router中的一些 API
weixin_44283589的博客
08-17 966
4、createWebHistory：这是一个函数，用于创建基于 HTML5 History API 的路由历史记录对象。5、createWebHashHistory：这是一个函数，用于创建基于 URL 哈希（#）的路由历史记录对象。在 vue-router 中，我们可以使用数组的形式定义一组路由配置，每个路由配置就是一个 RouteRecordRaw 对象。路由配置中，我们可以将组件或异步加载组件的函数赋值给 component 字段，这个字段的类型就是 RouteComponent。
第一节 vue3 router内置类型有哪些
zyf13671493506的博客
09-06 682
vue3 router内置类型有哪些
Vue-cli项目结构详解与关键配置点
本文将详细介绍一个典型的 Vue CLI 项目的目录结构及其功能。 首先，我们来看一下 Vue CLI 项目的默认目录结构： 1. **build**：这是项目的构建目录，包含了用于生产环境配置的文件。主要包括： - `build.js`：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值