Vue-Router的套娃

最新推荐文章于 2023-07-10 01:02:48 发布
最新推荐文章于 2023-07-10 01:02:48 发布
阅读量244 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60280770/article/details/120157952
版权
本文介绍了如何在Vue项目中设置Vue-Router，实现双层路由。首先，通过npm安装axios和element-ui，然后在main.js中配置路由，并引入新建的routes.js。在src目录下创建routes.js来定义路由，包括一级路由Test.vue和二级子路由。通过浏览器输入相应的路径，可以观察到双层路由的展示效果。
摘要由CSDN通过智能技术生成

Vue-Router双层路由

一. 安装路由

在这里插入图片描述
安装axios(在josn文件里面查看，如果有axios，就代表安装成功！)
在这里插入图片描述
安装element-ui框架

在这里插入图片描述

在终端输入 启动路由命令：

在这里插入图片描述

二.配置main.js

在main.js里面配置路由：（基本组件不变,记得在new Vue 里面添加router） ,然后通过Vue.use() 明确地安装路由功能

在这里插入图片描述

三.打包路由

在src下，建立一个可以存放路由配置的js文件(routes.js)：

在这里插入图片描述
打完包，记得在main.js里面添加routes.js的路径

在这里插入图片描述

四.渲染页面

1.第一层路由（Test.vue）：

在这里插入图片描述

在浏览器输入:本地端口+#+文件名 (显示效果如下)
在这里插入图片描述
2.第一层的子路由（又叫套娃）：

在Test后面加个’逗号’，children 再添加一个数组存放子路由们的路径

在这里插入图片描述

在浏览器输入:本地端口+#+文件名 (显示效果如下)
在这里插入图片描述

小翁-
关注
路由嵌套（套娃）
qq_41936090的博客
01-04 348
刚刚做了个路由嵌套的练习，先看看效果：   虽然做的很简陋，但是已经可以看出路由嵌套的应用场景了，在当个页面内切换视图，如德芙一般的纵享丝滑。接下来直接放代码：   看代码之前请先说一下这个命名：     菜单一：包含了面板一和面板二     菜单二：包含了面板三和面板四 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌套路由</t
vue系列教程-11vuerouter路由
qq_41689712的博客
06-23 413
本内容为系列内容，全部内容请看我的vue教程分类 我的个人博客 本节仓库地址 视频教程地址 什么是路由 大家还记得我最开始提到的spa单页面吗，通过不同的路径显示不同的组件，这个就是通过router实现的 那么首先我们还需要引入一个 router文件 <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script> 这里的话我们还是以上面的bilibili消息中心为示例，使用到刚刚的.
嵌套路由--一个来自vue项目的神奇俄罗斯套娃
兵锅锅的博客
11-26 1612
在实际的项目中，往往并不是一个页面用几个固定路由跳转就可以实现了，一般都是多层嵌套的组件来组成整个项目，为了方便管理，我们也希望在url上能体现出这种层级关系， 中嵌套着好几个路由搭配使用， ...
vue-路由嵌套
weixin_46643055的博客
11-28 457
网页页面从登录、注册首页进行路由切换，在进入首页之后又会出现新的导航用于切换新的页面导航，这样的导航跳转属于路由嵌套-----简单来说就是“套娃” 例：在布局组件Layout.vue中添加新的导航 <template> <div class="layout-container"> <!-- 展示嵌套路由对应的组件的位置 --> <router-view></router-view> .
一次 Vue 中 sync 和 $emit 的套娃
如果有了可惜
04-21 147
需求：基于 element-ui 的 Dialog 组件二次封装 Dialog.vue <template> <el-dialog :visible="visible" @close="$emit('update:visible', false)" :width="width" > <!-- 头 --> <template #title> <span class="_label">{{ t
vue-router嵌套/二级路由+视图路由（children）
muzidigbig的博客
11-03 9807
一、嵌套路由（配置好父路由component后，在父路由中添加children属性来配置这个父路由的子路由） 需要注意的是：父组件中的<router-view></router-view>是子组件的占位符是必不可少的，与子路由链接<router-link>在同一个组件中 嵌套路由的现象：点击了子路由跳转之后父路由组件的内容一直呈现；子路由的内容进行切换，地址...
vue-element-admin 项目运行流程梳理
莞工杰仔的博客
03-18 2208
vue-element-admin项目运行流程
深入浅出学Vue(六) | Vue路由router
super1223的博客
07-09 272
目录Vue路由安装CDN引入直接下载NPM引入初识vue-routerrouter-linkredirect重定向的使用设置router-link激活样式路由传参通过$router.query方法传参通过$router.params方法传参路由嵌套router实现经典三栏视使用watch监听路由属性path变化 Vue路由 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 2009
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3944
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Vue-Router嵌套路由children的使用
最新发布
qq_45647792的博客
07-10 4649
嵌套路由就是父路由中嵌套他的子路由，父路由中有自己的路由导航和路由容器（router-link、router-view）（前者用于跳转，后者用于显示且必须位于父路由中）（前者可以没有，后者不能没有，否则进行跳转后路径会变化，但页面不发生变化）。嵌套路由使用于实现页中页效果，如若依框架中的首页、用户管理等页面的显示。
套娃问题的解析(处理有零的问题)
nkligang的专栏
06-08 925
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /> 
Vue的Vuex的store （禁止套娃）
橘子味奥利奥
03-06 322
https://vuex.vuejs.org/zh/guide/ 仔细读上面官网的介绍就会很清楚，store，state，mutation的关系 根据官网写了一个很简单的小例子，只用到了store，state，mutaion，无需安装vue，vuex，只用引入。 在这里，没有用模块化开发，是组件化开发。小小例子，不成敬意。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
vue-router的嵌套使用（children），实现页中页效果
weixin_47886687的博客
11-01 1854
我们所看到的页面实际都是直接或间接由APP.vue根组件映射出来的 嵌套的组件需要嵌套的路由来映射，配置好父路由后，需要在哪个路由页面里面映射，就在哪个父路由添加children属性。 步骤一：配置完父路由后添加子路由 vue-----路由（router）的全局配置。 需要注意的细节：children里面的path不需要加“/”，以斜杠开头会被当做根路径 children 配置就是像 routes 配置一样的路由配置数组，可以嵌套多层路由。 { // 父路由 .
Vue-（2）双层路由
Sengoku_Xingzi的博客
09-14 576
1.在src文件下创建router文件夹和router.js PS： （这是重新创建了路由 和上一篇文章不同，原路由写在mian.js，现改成在router.js文件下写路由） 在router.js 写下多了个嵌套 ps:(import 定义名 form "路径" import Test from "路径" import Demo01 from "路径" const routes = [ { path: "设置路径1", component: Test, chi...
vue 学习 03 —— ElementUI
zcy的博客
04-16 390
系列文章 vue 学习 01 —— 基本语法 vue 学习 02 —— vue-cli项目、Webpack、vue-router vue 学习 03 —— ElementUI 文章目录系列文章七、Vue+ElementUI1、登录页面2、路由嵌套3、参数传递和重定向4、路由模式与4045、路由钩子与异步请求（Ajax） 七、Vue+ElementUI 文档：https://element.eleme.cn/#/zh-CN/component/installation 1、创建工程hello-vue 2、安
VUE-03 双层路由
m0_59214979的博客
09-13 695
1.在scr创建一个新的路由文件夹router和文件router.js 2.router.js的配置内容（router.js是子路由） 双层路由标准代码： ps:(import 定义名 form "路径" import Test from "路径" import Demo01 from "路径" const routes = [ { path: "设置路径1", component: Test, children: [{ path: "/路径...
vue嵌套路由（二）
热门推荐
安静的对折的专栏
04-17 2万+
在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。 index.html，只有一个路由出口 main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。chi
vue路由和嵌套方法
励志要成为it大佬的博客
04-20 3041
学习vue路由和vuex有一周时间了  今天把学会的方法总结一下，我是用npm搭建的开发环境在npm安装vue的时候会提示你是否安装路由，如果没有就安装一个：npm install vue-router --save刚学习的时候我是把组件都放在App里面注册和使用的，后来发现可以另写一个js文件，把声明的组件和路由路径都保存在那个js文件里面，这样写有好处，比如文件分类明确，方便维护这里的rout...
深入理解vue-router：单页应用的路径管理
过监听hashchange事件，vue-router可以捕捉到URL的变化，进而更新对应的组件。 2、History模式： History模式利用了HTML5新增的History接口和PushState、ReplaceState方法，它可以让开发者改变location对象的hash，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值