vue-cli嵌套路由

最新推荐文章于 2024-05-09 09:21:53 发布
最新推荐文章于 2024-05-09 09:21:53 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue.js 文章标签： vue vue路由 vue嵌套路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39588818/article/details/80093949
版权

正常的路由，我之前就给大家介绍过，今天来给大家介绍嵌套路由

            

这就是嵌套路由的写法，    有的人会问，resolve是啥，不是应该，component:'Home’吗，这是按需加载的写法，不理解的同学可以去看看我的另一篇文章，vue的按需加载


这是父级路由的写法，我这里没用router-link，不理解this.$router的同学可以去看看我的vue路由博客，


这是子路由的写法

董小礼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue vue-router 嵌套路由
全易
07-07 1305
在router目录下的index.js路由配置文件里使用children嵌套路由，如下： 嵌套路由配置好，就需要在嵌套的页面展示被嵌套的页面了 router-view 为什么写这？因为刚在配置路由的时候是在child下配置的呀。 效果如下： 到此有个问题来了，点击进入child页面时（图2）是不是发现右侧时空白的？此时是不是需要默认进这个页面时右侧显示成图3那样呢？ 那么就需要重定向一...
windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
安树的博客
11-24 7648
windows下vue-cli及webpack 构建网站(一)环境安装  windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件 1、本篇文章是建立在以上三篇文章的基础上的。 2、安装 vue-router 插件，运行cmd进入到项目目录下面，运行以下命令： cn
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程_vue-cli 路由(1)
最新发布
2401_84433807的博客
05-09 618
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
vuecli3构建项目全过程（三）路由配置
qq_50275870的博客
01-11 543
vue路由配置，前置守卫，后置钩子，组件注册，懒加载，history模式，hash模式，重定向，meta
Vue-cli项目中路由的基础用法，以及路由嵌套
zhouzuoluo的博客
07-25 1万+
文件目录：   编辑router文件夹下的index.js文件 · 第一步：引用vue和vue-router ，Vue.use（VueRouter） /* eslint-disable*/ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) ·第二步：引用定义好的路由组件 import Ch...
基于vue-cli的vue项目之路由4--嵌套路由
胡世林的博客
09-05 1498
嵌套路由，很是常用 1.hello.vue:含有嵌套路由的页面，主要在第五六七行，第二十，二十一监听，注意监听的对象 这个是hello页面,穿过的参数是{{$route.params.hparam1}} children1页面 children2页面 export default { name: 'hello', data()
在vue-cli脚手架中配置一个vue-router前端路由
08-30
"在vue-cli脚手架中配置一个vue-router前端路由" 在本文中，我们将详细介绍如何在 vue-cli 脚手架中配置一个 vue-router 前端路由。首先，我们需要了解什么是 vue-router，以及它在前端路由中的作用。 vue-router ...
详解在vue-cli中使用路由
08-29
Vue Router还支持嵌套路由、动态路由匹配、重定向、命名视图等多种高级功能。例如，你可以为一个组件定义子路由，或者使用`props`选项传递参数。详细的路由配置和用法可以参考Vue Router的官方文档：...
vue-element-plus-admin:一套基于vue3，element-plus，typesScript，vue-cli4的后台集成方案
03-29
基础模版-template分支单页模版-单页分支功能- 登录 / 注销- 权限验证 - 页面权限 - 指令权限 - 权限配置- 多环境- 多页配置- 引导页- 全局功能 - 三种不同风格 layout 布局 - 动态侧边栏（支持多级路由嵌套） - ...
基于Vue Cli和嵌套路由技术
11-06
在这个基于Vue Cli和嵌套路由技术的项目中，我们将探讨如何使用这些工具构建一个具有多页面结构的应用。 首先，Vue CLI 提供了自动化配置，包括预设的项目模板、热模块替换（Hot Module Replacement）、代码分割、...
Vue嵌套路由（vue-cli项目写法）
qq_45593068的博客
08-09 628
Vue嵌套路由（vue-cli项目写法） 创建项目后 书写路由规则 const routes = [ { path: '/', redirect: '/home', // 重定向到/home路径 }, { path: '/home', component: Home // home组件页面（第一层） }, { path: '/about', // about组件页面（第一层） component: () => import('
vue-cli内.vue组件嵌套.vue组建
刚刚好
06-07 1852
<template> <div> <p class="p1">Hello ,This is {{page_name}} now</p> <test/> <!-- 3.使用 --> <hello></hello>
Vue笔记3 vue-cli单页面应用与路由设置
anran_886的博客
09-14 5682
1.准备，安装webpack和vue-cli，根据官网教程构建项目。搭建好的项目如下： 2.配置路由 1). 在components中创建Page.vue，在router中的index.js中配置路由。import Vue from 'vue' //1.导入路由组件vue-router import Router from 'vue-router' import Hello from '@/co
Vue-cli3如何添加路由（router）
邓占勇的博客
01-17 2万+
之前使用的vue-cli2的是否可以在创建项目时直接引入vue-router，但是现在Vue-cli3新建项目后却少了很多东西，我们需要自己来安装使用路由。具体方案如下： 安装路由 npm install vue-router 创建router.js与mian.js同级 router.js中的内容为 import Vue from 'vue' import Router from...
vue路由嵌套，配置children嵌套路由
热门推荐
前端小狮的博客
07-12 5万+
嵌套路由就是路由里面嵌套他的子路由，可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套 //mine组件 <template> <div class="content"> 在mine的组件里面嵌套路由 <router-link to="/mine/c"&gt...
基于vue-cli的vue项目之路由2--param传参
胡世林的博客
09-04 2817
使用vue的param传参
vue-cli项目路由history模式相关配置
jstljspservlet的博客
06-14 3325
一.项目配置 1.路由配置 在router配置文件中加入mode: ‘history’, 如果nginx配置文件中要映射到子文件mobile，那么要配置 base: ‘/mobile/’ 2.打包配置 如果nginx配置文件中要映射到子文件mobile，那么要在config目录下的index.js中build打包配置下将 assetsPublicPath: ‘/’ 修改为 assetsPubl...
Vue-cli的路由配置与使用（包看包会实用版）
Ninja_Kiro的博客
07-12 783
最近搜罗到网络上关于vuecli配置与使用的资料要么不完整要么不能解决实际需求 所以既然找不到的话那就自己写一个分享出来给大家吧！在项目中src的目录下创建文件夹 router 在该文件夹下创建一个 index.js 文件 App.vue main.js 以上就是分享的全部内容，如果内容对你有帮助的话不妨 本文按照使用需求撰写的，并非真正意义上的vue-router教程，还请多多指教 想要深入学习的可以参考其他文章或是官方文档：https://router.vuejs.org/zh/...
vue-cli2项目开发文档
05-31
6. 路由管理：介绍如何使用Vue-router管理项目的路由，包括路由的定义、跳转、嵌套等。 7. 状态管理：介绍如何使用Vuex管理项目的状态，包括状态的定义、提交、派发等。 8. API接口：介绍如何在项目中使用API接口...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值