实现同页面下多个模块交替出现 vue-router路由器详解

最新推荐文章于 2025-04-12 14:28:52 发布

咏唱代码的魔法师

最新推荐文章于 2025-04-12 14:28:52 发布

阅读量211

点赞数 3

文章标签：前端

本文链接：https://blog.youkuaiyun.com/Tirut/article/details/136828539

版权

本文介绍了Vue框架中的路由机制，特别是如何使用<router-link>根据路径跳转到不同的视图组件（如DishView.vue和OrderView.vue）。重点讲解了在ContainerView.vue中嵌套使用<router-view>，以便在组件内部变化时实现局部刷新。

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

在上文表中可以知道

/dish路径对应 DishView.vue视图组件

/order路径对应 OrderView.vue视图组件

<router-link>根据路径链接视图组件

<router-view>根据路径展示视图组件

通过观察下图中<router-view/>的位置

可以明白在ContainerView.vue这个页面之中

组件将会在<router-view/>的位置出现

相当于组件被编辑后替换了<router-view/>

嵌套路由

嵌套路由就是当组件内部发生了变化需要进行组件内部的修改时,

就需要进行嵌套路由

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咏唱代码的魔法师

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

12 使用Vue+Vue-router+el-menu实现菜单功能实战

xingyu_qie的专栏

04-10

8996

我们将继续维护添加Vue-router的路由数据,借助ElementUI的el-munu组件，来实现左侧菜单功能的实战，并自己实现一个el-menu组件

Vue3 - 路由 Vue-router 4.X（配置与使用教程）

王佳斌

11-30

4818

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

1 条评论您还未登录，请先登录后发表或查看评论

vue中局部组件切换

weixin_47517176的博客

06-08

1423

只有两个组件的话可以使用v-if,v-else/v-show；多个组件切换使用的是，通过在data里定义一个componted，修改componentnext值来切换组件。

# Vue 多模块管理路由（Router）、请求（Axios）

不积跬步，无以至千里；不积小流，无以成江海

05-02

1056

Vue 多模块管理路由（Router）、请求（Axios）友情链接：Vue 组件封装打包发布：https://blog.youkuaiyun.com/qq_37248504/article/details/123293585 使用 vue-router 需求前端 Vue拆分成多个模块的时候，路由在各自模块中管理，最后将路由收集到主模块中进行注册 Vue多模块中axios配置调用不同的服务路由Router 统一管理目前有模块 shop-back-app、和 lowcode-model，shop-ba

技术验证：vueRouter的命名视图加splitpanes分割面板实现一个页面多个模块同时处理不同页面的功能

2301_78419762的博客

05-24

1070

为了实现一个可以左边窗口打页游，右边窗口上方显示分析功能，下方显示其他页面如浏览器看B站的功能，我使用splitpanes和vueRouter的命名视图实现了三个模块各干各的互不干扰。提示：以下是本篇文章正文内容，下面案例可供参考主要使用vueRouter的全局前置守卫来进行判断ABC三个部分哪个页面要跳转，如果只有一个页面跳转则跳转前页面的ABC内容覆盖掉其他两个页面。

vue多个＜router-view＞嵌套理解

毅香雪海的博客

05-30

6123

在学习vue的过程中，多次碰到如有跳转错误的问题。我在多级菜单(存在多个<router-view>)中路由跳转多次不符合自己的预期。经过尝试，终于初步理解多个<router-view>嵌套时，与路由配置的关系。假设我们有如下路由配置 const routerMenu = [ { name: 'home', path: '/home', component: () => import('@/components/layout/...

vue-router路由分模块引入（Vite，Webpack）

weixin_69370222的博客

12-10

1240

在index.ts总文件中，只需要使用import ‘fileName’ from "./file"把每一个文件模块一个个引入，我们最终只需要导入所有模块的内容汇总到。2.map遍历数据，调用moduleFiles对象中每一个函数的default属性拿到我们导出的值。3.判断导出的值是否为数组，是扩展结构push到routes数组中，否直接加入。对象导出的对象中有一个属性：default，可以获取到默认导出的所有内容。（内心：我就想写短的代码！导入所有配置的路由模块，模块一多那么这些的。

Vue总结第五天：vue-router （使用模块化（创建Vue组件）机制编程）、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套（子路由）、路由传递数据、导航守卫）

Coder-coco的博客

09-05

159

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.只有在这个路由被访问到的时候, 才加载对应的组件.methods: {query: {

vue-router-user-roles:一个Vue.js插件，可根据用户角色保护路由。添加您自己的身份验证

04-14

$ npm i vue-router-user-roles 首先创建一个Vue路由器实例。最好在专用文件中执行此操作并导出为模块，例如 // router.js import Vue from 'vue' ; import VueRouter from 'vue-router' ; Vue . use ( VueRouter ...

【Vue全家桶】Vue-Router (详解)

贤蛋大眼萌

08-09

2651

**前端渲染：**每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染。使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前页面是一个替换操作，那么可以使用replace。组件的本身也有组件需要内部切换，这个时候就可以采用嵌套路由，在第一层路由中也使用router-view来占位之后需要渲染的组件。以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。...

vue-router-Vue.js的官方路由器。-Vue.js开发

05-27

简介vue-router是官方路由器vue-router这是vue-router 3.0，仅适用于Vue 2.0。对于1.x路由器，请参见1.0分支。简介vue-router是Vue.js的官方路由器。它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变...

Vue中router-view和子路由的使用方法

如需咨询可联系我，V：chen2318341674

01-29

6674

语法场景：实现一个随着切换tab栏，头部底部不变，中间内容变得功能需求。首先需要在路由文件中添加子路由（children）： import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home.vue' import Content1 from '../views/Content1.vue' import Content2 from '../views/Content2.vue' import Cont

vue实现同一个页面某一位置进行不同组件切换展示效果

weixin_51935690的博客

07-27

7740

目录结构如图，在主页面home点击旁边导航切换不同组件在同一页面效果 2、动态路由<component:is="componentnext"></component>用于切换组件，改变componentnext的组件名字即可，利用了动态绑定:class来指定此组件时此导航选中颜色的变化 2.代码即注释如下 <template> <div>  .

vue路由分开在好几个页面分模块来写

肖肖肖丽珠的博客

07-12

5868

问题原因是变态的项目经理说路由文件如果很长很长。全在一个文件里面放的不就很大不好找吗？他希望我把路由放在好几个页面里面。我查了好久都没有找到vue的路由分开在好几个页面来写的尝试了一下。没报错但是页面空白。最后在一个大神下面留言请教，没想到他竟然写了一篇博客给我解答链接地址在这里https://blog.youkuaiyun.com/FungLeo/article/details/81014184...

vue-router模块化管理

国企程序媛 record 前端技术 & review code。。。

07-15

778

背景：项目非常大的时候路由非常多，路由模块化就易于阅读以及管理 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

将 vue 路由拆分到多个文件( vue-router 目录结构)

beyond__devil的博客

03-14

8127

对于稍微复杂点的项目，我们定义的路由文件，会越来越大，而且所有路由都混在一个页面，看着也很混乱，不清晰。所以，想把 vue 路由也按功能，类似 laralel 一样，划分为多个路由文件，最终的路由结构类似下面： routes/ index.js account.js student.js business.js ... 也可以是更深层次的嵌套 school/...

JSON-Server 极速入门教程