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

Logo

前往低代码交流专区

更多推荐