Vue的结构，路由配置

最新推荐文章于 2024-04-18 22:36:56 发布
最新推荐文章于 2024-04-18 22:36:56 发布
阅读量1.8k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/medusee/article/details/108923238
版权

创建分支

在git bash中

git checkout -b createComponents

【成功后的回馈：Switched to a new branch ‘createComponents’】

Vue文件结构简介

public

放置全局静态资源

node_modules

放置第三方模块

src 目录

主要的开发环境

src\assets

放置静态资源，期内的资源会编码成base64格式，打包到模块中。主要放一些小的图标，图片。

main.js 主模块
App.vue 主组件
views 页面级别的组件

放置复用性较小的组件

components 公共组件

放置复用性较强的组件

配置路由

路由懒加载

在router/index.js 中

component: () => import(*/\* webpackChunkName: "about" \*/* '../views/About.vue')
最低0.47元/天 解锁文章
medusee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue结合路由配置递归实现菜单栏功能
10-15
接下来，我们在`src/router/index.js`中配置路由，以处理菜单项对应的页面跳转： ```javascript import Vue from 'vue' import Router from 'vue-router' import Menu from '@/components/Menu' Vue.use(Router) ...
Vue 动态路由接口数据结构化为符合VueRouter的声明结构及菜单导航结构、动态路由懒加载方法
JCM_ZZ的博客
02-22 994
* 项目打包代码实现按需分割 * 路由懒加载按需打包，排除引入子组件的冗余打包（仅处理打包冗余现象，不影响生产部署） * 解决路由懒加载 `import` 方法内引入变量报错问题
vue后端返回路由表来进行权限管理，加载指定路由结构，不包含则不加载
LONGLONGAGO_RU的博客
07-25 1382
创建vue项目，配置环境变量，后续需要用到。这里只配置生产环境和开发环境。 一、项目根目录创建　　.env.production　　文件 NODE_ENV=production VUE_APP_URL=http://456.com 二、项目根目录创建　　.env.development　　文件 NODE_ENV=development VUE_APP_URL=http://123.com src目录下创建router文件夹，index文件中的内容为 import Vue from 'vue' impor
vue框架中的路由
最新发布
m0_57851747的博客
04-18 896
路由模块封装 声明式导航 & 导航高亮 / 精确匹配&模糊匹配 / 自定义高亮类名 声明式导航传参 ( 查询参数传参 & 动态路由传参 ) 路由重定向 / 路由404 / 路由模式 编程式导航 / 编程式导航传参 ( 查询参数传参 & 动态路由传参）
Vue学习：Vue中的路由详解（完整版）
qq_49916504的博客
06-19 1万+
vue中的路由知识详解完整版
【Vue学习笔记】路由详解
biancheng_的博客
03-30 1451
在Vue中，路由是指通过URL路径来管理不同页面之间的交互跳转和状态切换的机制。Vue Router是Vue.js官方提供的路由管理器，可以用于构建单页应用（SPA）。通过Vue Router，开发者可以定义多个路由规则，每个规则对应一个路径，访问该路径时就会渲染对应的组件。同时，Vue Router还支持动态路由、嵌套路由、命名路由、路由传参等功能，方便开发者根据实际需求进行配置和使用。在Vue中使用路由需要先安装Vue Router，并在Vue实例中注册路由器。然后，就可以使用。
Vue路由（vue-router）详细讲解指南
weixin_30502157的博客
09-21 2156
中文文档：https://router.vuejs.org/zh/ Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转； 首先我们来学习三个单词（route，routes，router）： 　　route：首先它是个单...
vue实现路由切换改变title功能
10-16
2. 创建一个新的Vue Router实例，并定义路由配置。每个路由项可以有一个`name`属性，用于在后续的代码中引用。 3. 在路由实例上注册全局后置守卫`router.afterEach()`。这个函数会在每次导航结束后调用，接收两个...
vue 动态路由
01-20
`export default` 部分定义了组件的基本信息，包括其名称 `name: User`，这在路由配置和导航守卫中很有用。 ```html 这是用户信息界面: {{ $route.params.userId }} export default { name: 'User', } `...
vue路由配置
02-05
3. **路由配置**：在Vue Router实例中定义路由规则，包括路径、组件和导航守卫等： ```javascript const routes = [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '*', ...
【Vue路由（router）进一步详解】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
03-23 3万+
文章主要从Vue-router（路由）常用的几个属性以及参数配置出发，更深一层了解路由在实际开发中的使用，结合实例向大家说明路由常用的参数配置，以及使用路由的一些小技巧。
深入Vue-Router源码分析路由实现原理
陨落的轨迹的博客
03-02 1万+
深入Vue-Router源码分析路由实现原理使用Vue开发SPA应用，离不开vue-router，那么vue和vue-router是如何协作运行的呢，下面从使用的角度，大白话帮大家一步步梳理下vue-router的整个实现流程。
vue-router 路由基础简单介绍
webxiaoma
06-03 3305
今天我总结了一下vue-route基础，vue官方推荐的路由。一、起步HTML<div id="myDiv"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link> // 渲染出口 <router-view><
Vue_路由配置&路由数据获取
ZH
08-20 3470
const routes = [ { path: '/a/b/c/d/e/f', // 这个匹配到的就是 host#/a/b/c/d/e/f }, { path: '/', // / }, { path: '/demo' // /demo }, { path: '/demo/:id' // /demo/任意值 }, { path: ...
前端vue的路由实现原理
weixin_33755554的博客
03-24 2301
前言 路由最初是由后端提出，浏览器发出请求，服务器根据路由的配置，返回相应信息。后来随着ajax的流行，异步数据请求交互在浏览器局部刷新。单页面更是把这种方式用到了极致，不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，本文就从源码来分析下 Vue路由vue-router的实现原理。 1.导入插件 import Router from 'vue-router' export d...
详解VUE路由
前端程序猿的博客
12-29 1528
详解VUE路由以及简单的栗子
VUE中对路由文件的拆分
yolo3712的博客
01-11 1475
vue路由是vue中非常重要的一部分，可是当写项目时路由是非常多的，当项目很大时，全部写在index文件中检查起来会非常麻烦，这个时候就需要对index文件中的路由进行拆分！ 下面以一个学生的管理系统为例，有学生用户，老师用户，管理员： 如果只是简单的几个路由，跳转不多，这样写确实没毛病，可是一旦有个组件的路由跳转非常多，如管理员的路由跳转： { path: '/admin', component: () => import ('@/pages/teac.
前端vue路由模块拆分归类【理解版】
在写作的路上持续输出。
06-29 847
前端vue路由模块拆分归类，快速理解版。一🚀
vue路由案例详解
张木期的博客
09-27 3519
1.能够说出什么是路由 2.能够说出前端路由的实现原理 3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由，动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管理案例 1.路由的概念 路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系，就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务器端进行实现，并完成资源的分发 2).前端路由是依靠hash
vue3动态路由数据结构
01-18
Vue3动态路由数据结构可以采用以下方式进行设计： 1. 菜单数据结构： 菜单数据结构可以使用一个数组来表示，每个菜单项包含以下属性： - 菜单名称（name）：表示菜单的名称 - 菜单路径（path）：表示菜单对应的路由路径 - 菜单图标（icon）：表示菜单的图标 - 子菜单（children）：表示当前菜单的子菜单，如果没有子菜单则为空数组 示例： ```javascript const menuData = [ { name: '首页', path: '/', icon: 'home', children: [] }, { name: '用户管理', path: '/user', icon: 'user', children: [ { name: '用户列表', path: '/user/list', icon: 'list', children: [] }, { name: '添加用户', path: '/user/add', icon: 'plus', children: [] } ] } ]; ``` 2. 路由数据结构： 路由数据结构可以使用一个数组来表示，每个路由项包含以下属性： - 路由路径（path）：表示路由的路径 - 组件（component）：表示路由对应的组件 示例： ```javascript const routes = [ { path: '/', component: Home }, { path: '/user', component: User, children: [ { path: 'list', component: UserList }, { path: 'add', component: UserAdd } ] } ]; ``` 通过将菜单数据和路由数据结合起来，可以实现动态生成路由配置的功能。在加载菜单数据后，根据菜单数据动态生成路由配置，并将其添加到路由中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值