Vue 父路由和子路由

最新推荐文章于 2024-03-08 16:13:43 发布
最新推荐文章于 2024-03-08 16:13:43 发布
阅读量3.5k 收藏 7
点赞数 2
分类专栏： Vue 文章标签： vue web java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42914989/article/details/114269872
版权

Vue 父路由和子路由

以黑马项目二leyou商城的前端界面为例

访问项目

我们在访问localhost:9001时候首先会进入index.html和读取main.js
在这里插入图片描述

在这里插入图片描述

main.js里面包含了new Vue（{}）,我们看一下里面参数：router。
router是路由，负责把数据渲染#app的元素上的< template>
寻着线索我们再来打开router.js文件

首先看到的是下图的routes
routes是一个路由数组，里面可以设置需要映射的路径。

父路由

访问localhost:9001/#/
系统会在route.js文件中匹配“/”根路径，此刻通过companent：路由到Layout组件。此刻网页页面会加载组件，并且显示出来。
在这里插入图片描述

子路由

通过父路由只是将导航栏、标题栏等内容加载进来了，细心的同学可以看到中间的主页面是空白的，为了好看可以在component下一行添加重定向到一个默认页面，redirect:"/index/dashboard"
在这里插入图片描述
用户点击边栏的各项子标题，可以触发对应子路由的路径，显示对应的界面信息。

Memorial Day is 517 days
I miss you
xiaokeai

宏辉
关注
专栏目录
vue-router嵌套路由|父子路由
caoxinjian423的博客
10-06 1804
router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue' import NotFound from '../views/NotFound.vue' import TestChild from '../views/TestChild.vue' Vue.use(VueRou
vue2父路由调用子路由的方法
零杠六
05-22 3661
父路由.vue <template> <div> <router-view ref="childrem"/> </div> </template> <script> created(){ this.$refs['Childmain'].childe } </script> ---------------------------------------------------------------------------.
Vue Router父路由与子路由问题
最新发布
刘一帆的博客
03-08 490
其次：要直接通过父路由访问子路由，需要在父页面加入，完美解决。首先：子路由不需要/
Vue学习之旅----父子路由-路由嵌套
瑞朋哥的博客
05-23 565
<template> <div id="app"> <router-link to='/home'>首页</router-link> <router-link to='/news'>新闻</router-link> <router-link to='/pcontent'>商品详情&lt...
(一) Vue 路由+子路由
amyloverice的博客
12-13 1085
一、搭建vue脚手架 1、安装vue-cli：npm install -g vue-cli  2、初始化项目：vue init webpack 项目名  3、安装依赖：npm install （npm 版本需要注意：npm: 2.14.20 should be >= 3.0.0，可以事先升级 node 为最新版本，直接下载 dmg 进行安装替换即可） 4、运行：npm r
【Vue】Vue通过路由实现父子【嵌套】功能（图文+完整代码）
【敦厚的曹操】的专栏
06-01 3276
【Vue】Vue通过路由实现父子【嵌套】功能（图文+完整代码）
vue 路由子组件created和mounted不起作用的解决方法
10-16
在这个问题中，开发者遇到了在路由子组件中`created`和`mounted`钩子函数不触发的情况。通常，这些生命周期钩子在组件实例创建和挂载到DOM时会被调用，但当涉及到路由跳转和`keep-alive`缓存策略时，可能会出现异常...
Vue 解决父组件跳转子路由后当前导航active样式消失问题
11-20
总结起来，Vue Router中的导航激活样式问题通常可以通过正确选择和使用`router-link-active` 类来解决，而对于Element-UI的`el-menu`，绑定`default-active`至`$route.path`可以确保菜单项的激活状态与路由匹配。...
vue-路由精讲 二级路由和三级路由的作用
10-14
在本篇内容中，我们将深入了解Vue Router中的二级路由和三级路由是如何实现和使用的。 首先，我们需要了解什么是二级路由和三级路由。在Vue Router中，当我们说一级路由，通常是指应用中的主导航链接，比如“首页”...
vue中父子路由的配置
weixin_44464373的博客
06-04 4047
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '../components/HelloWorld' import Login from '../view/login/Login' import Index from '../view/index' import StudentNavMenu ...
vue组件数据传递、父子组件数据获取，slot,router路由功能示例
10-17
主要介绍了vue组件数据传递、父子组件数据获取，slot,router路由功能,结合实例形式分析了vue.js组件数据传递、路由相关概念、原理及相关操作技巧,需要的朋友可以参考下
关于 vue路由初识（子路由）
qq_39779284的博客
09-05 457
今天学习了简单的路由，和children 子路由的用法，大致可以总结为，假如我们在做一个带有底部导航的移动端项目可以这样写 routes: [ { path: '/', name: 'home', redirect: '/index', component: () => import( '@/sgw/home' ...
vue路由与子路由嵌套的使用（配合源码观看）
qq_44497296的博客
07-29 1130
要想加新的点击页面并且绑定路由需要以下步骤 1.在router.js里加入新路由，普通路由需要在path中加‘/’如下图。 2.在views里创建新的文件夹，文件夹里的vue文件名字为index.vue时可在路由中省略vue文件的文件名 （views里放的是Head里的大路由文件，一会的components里放的是子路由们的文件） 3.还要再router.js中引入此文件，如下图 4.在views里的文件里写这个组件的内容即可，记得写 <router-link class="dongtai" t
学习笔记——vue-router显示父路由地址
qq_41339126的博客
12-06 2005
vue-router如何显示父路由地址。以 "/" 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。
vue路由和子路由children的使用
weixin_36585489的博客
09-02 3275
转自博客1：https://www.cnblogs.com/itgezhu/p/13321196.html
VUE学习第五天（父子组件传参与路由）
weixin_47774000的博客
03-28 366
一、父传子 app给father传值 设置props属性就可以接受父组件传值 <div id='app'> <father fromapp="接收app的值"></father> <father fromapp="appnumber"></father> <father></father> </div> <template id="fa...
Vue获取上个路由
Silence_Sep的博客
10-31 3509
使用钩子函数beforeRouteEnter beforeRouteEnter(to, from, next) { console.log('beforeRouteEnter第一个参数to',to); console.log('beforeRouteEnter第二个参数from',from); console.log('beforeRouteEnter第三个参数next'...
vue踩坑_cli_父子传值和router
Mobius_z的博客
03-02 465
父子传值：1.父传子很简单，使用 v-bind 绑定给子组件就好了，对应的子组件使用props接一下就好data中的mes，message，list都是向子组件传的值data () { return { message:"send code", mes:"子向父组件穿的值", getChildrenMes:'', list:[{ ...
Vue-router中子路由和二级路由的区别
studentenglish的博客
07-21 1021
在vue-router中，多级路由有如下两种写法： 直接多级路由 { path: '/home/comp', name: 'comp', component: () => import('../common/comp.vue'), meta: { name: 'comp' } } 以子路由的形式 {...
vue子路由地址加父路由
07-27
在Vue中，可以通过在父组件中定义子路由来实现子路由地址加父路由。下面是一个示例： 在父组件的路由配置中，使用`children`字段定义子路由： ```js const routes = [ { path: '/parent', component: ParentComponent, children: [ { path: 'child', component: ChildComponent } ] } ] ``` 在子组件中，可以直接使用相对路径来访问子路由： ```html <router-link to="child">Go to Child</router-link> ``` 或者通过`$router.push`方法进行跳转： ```js this.$router.push('child'); ``` 这样，父组件的路由地址加上子组件的路由地址，就能够正确访问到子组件的内容。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值