vue-router模块化路由配置

最新推荐文章于 2022-11-22 17:44:38 发布
最新推荐文章于 2022-11-22 17:44:38 发布
阅读量1.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39905409/article/details/84862562
本文详细介绍如何在Vue项目中配置路由，并通过实例演示如何将路由与导航菜单进行绑定，实现导航切换时的动态样式更新。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

直接上代码
1、文件结构
在这里插入图片描述
2、main.js文件
在这里插入图片描述
3、index.js文件
在这里插入图片描述
4、routes.js文件
在这里插入图片描述
5、到这里路由配置基本结束，在浏览器输入对应的路由会出来对应的页面，接下来是将路由与导航绑定，举一例如下：
在这里插入图片描述
6、绑定后会发现切换导航时，导航栏的样式是不会发生变化的，这个时候检查浏览器的dom结构会发现，当点击某个导航时会被添加一个router-link-active的class
在这里插入图片描述
7、所以，我们可以在style中这样写
在这里插入图片描述
就可以动态添加样式了

Vue3 - 路由 Vue-router 4.X（配置与使用教程）
资深程序员
11-30 5111
vue3路由官方文档，vue3路由文档，vue-router4官方文档，使用Vite构建Vue3项目,对路由VueRouter，Vue3中VueRouter4路由的配置，vue3-vueRouterv4.x，vue3中vue-router4基本使用(路由基本配置)，Vue3-Router@4.x使用，vue-router4.x教程，Vue3中基于vue-router4的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3)，10分钟快速上手VueR
vue-Router路由的简介、配置以及嵌套路由
最新发布
weixin_70495659的博客
05-15 544
Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
Vue路由模块化配置的完整步骤
12-11
前言 企业运营后台页面很多，路由如若不区分模块化配置，所有路由挤在同一个文件将不好维护，所以路由的配置也要模块化 分享两个解决方案 —— Vue 路由配置的模块化（Plan A and Plan B） 注册需要 首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '' }) // 这里的 router 是这样的 export default new Router({ mode: 'history', routes: [], ... //
【vue】vue router路由模块化
Meditation_Crazy
09-16 1632
前言 因为现在的项目是他们之前随便找的一个框架，然后就在上面开发了，也没整理，优化什么的。 现在我在做。所以就一边开发，一边优化了。 这是现在的router.js文件： 上面是满满的导入文件，下面是router数组，全部加起来有1000多行，太乱了 文档 通过在群里问别人，他们说了模块化，以及在router数组里面的component直接Import导入文件 百度搜到的文章： https://blog.youkuaiyun.com/qq_39905409/article/details/84862562 h.
Vue路由的模块化
渣渣砖
03-03 1279
main.js import Vue from 'vue' import App from './App.vue' import VueResource from 'vue-resource' import router from './router/router' /* 引入公共的sCss */ import './assets/css/basic.scss' Vue.use(VueRes...
vue-router模块化，分层
qq_52915322的博客
09-24 1535
vue-router模块化，分层
vue-router模块化管理
国企程序媛 record 前端技术 & review code。。。
07-15 812
背景：项目非常大的时候路由非常多，路由模块化就易于阅读以及管理 1、目录结构 2、在main.js中注入router import router from "./router";//引入路由出口文件 new Vue({ router,//挂载路由实例 store, render: h => h(App) }).$mount("#app"); 3、router/index.js import Vue from 'vue'; import Router from 'vue-ro
uniapp中的一个完全相似Vue-router的路由插件
01-20
而 uni-simple-router 是一个专为 uni-app 设计的轻量级路由插件，它的设计思想与 Vue-router 非常相似，旨在简化 uni-app 中的路由配置。 ### 1. 安装和引入 uni-simple-router uni-simple-router 的安装有三种...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
在路由配置中，可以利用setup()函数和ref、reactive等工具来管理状态和响应式数据。 2. **Vite的配置与使用**：Vite 使用ES模块的动态导入，大大减少了项目的初始加载时间。配置文件 vite.config.js 可以定制化构建...
详解Vue-Router源码分析路由实现原理
10-16
`<router-view>`则根据当前激活的路由配置，动态插入相应的组件。 Vue-Router提供了多种导航守卫，如全局前置守卫、组件内守卫和路由独享守卫，这些守卫可以在路由切换的不同阶段进行干预，实现权限控制、数据预...
vue-router路由懒加载 路由规则模块化
Tsailing666的博客
11-22 748
vue-router 动态路由懒加载
Vue.js框架--路由模块化（二十六）
分享我的点点滴滴，在成长路上与你同行！
10-29 941
主要操作技能：   1&gt;创建文件夹\router.js文件      2&gt;写入相关路由配置 router.js import Vue from 'vue' //0. 使用路由 import VueRouter from 'vue-router' Vue.use(VueRouter) //1. 定义 (路由) 组件。 import Home from '../componen...
vue-router的模块化开发
置酒天晴的博客
11-12 558
在开发过程中，我们所有的router肯定不能放在index.js里，传统方案哪怕用各个js细分了各模块，还是需要在index.js里注册一下，这样很容易与他人代码冲突。这里我将提供我的思路，有什么不成熟的地方还望及时沟通。 以下便是项目结构： 丨- router     丨- modules            - item.js    
vue-router和模块化开发
weixin_30385925的博客
02-20 329
一、vue-router路由 1、简介： 使用vue开发单页面SPA(single page application) 当页面应用 根据不同的url地址，显示不同的内容，但显示在同一个页面中，称之为当页面 【参考】：https://router.vuejs.org/zh/ bower info vue-router//查看版本 ...
vue-router 模块化思想
m0_57136477的博客
03-03 858
前言 由官网介绍可知：vue-router 可是实现单页面复用 、动态路由选择 等 。但往往随着项目的初诞，而后逐渐扩大规模，需要的路由大大增加 。而如果将所有的引用 配置等都放在一个文件夹下 就显得极为臃肿。为降低耦合度，提高代码可读性，我们使用模块化。 文件配置 首先在Router文件夹下 创建 modules文件夹 和 index.js文件 modules文件夹 根据项目需求，在里面创建不同的路由文件(js) 在js文件里面，主要实现具体的路由映射 export defau
九、模块化工程中使用vue-router
光明小学王小雨的博客
11-25 445
一、默认的vue-router结构 使用vue-router的步骤: 第一步: 创建路由组件 第二步: 配置路由映射: 组件和路径映射关系 第三步: 使用路由: 通过<router-link>和<router-view> 创建一个vue cli项目 vue create learnvuerouter 在选择安装的loader里记得选择vue-router，如果没装的话创建项目后使用npm install vue-router --save装一下。 选择html5的history模式
Vue 路由的模块化
weixin_30715523的博客
06-26 212
其实就是对路由配置和实例化的过程进行js封装，挂载路由的时候依然在main.js中； 步骤： 1.在src文件夹下新建一个router文件夹，在router文件夹下新建文件router.js; 2.引入vue实例，把之前配置路由和实例化路由的步骤搬过来； 3.使用export defult router把路由实例被暴露出去 4.main.js中引用router实例并挂载； imp...
Vue【路由模块化】
YhWyl527的博客
07-14 227
直接在router文件夹内创建文件夹或创建文件以自己所需模块命名 这里假设的为 index为我们的总路由 index2为我们要书写的模块化路由 在index2中书写结构 这里的index2到时候是我们的模块命名这里只是举个栗子 导入到主路由文件内 使用 ...
Vue-router深入解析：路由机制与开发实践技巧
4. 路由配置与基本使用 - Vue-router的基本配置包括定义路由、路由组件映射、路由的嵌套等。 - 在Vue实例中，通过router-view来展示匹配的组件。 - 使用路由守卫可以控制导航，实现权限检查等功能。 5. 高级特性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值