vue定义嵌套路由


在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？
其实很简单，只需要我们在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。

下面为示例代码：

index.html，只有一个路由出口
<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-
view> </div>

main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
//引入两个组件 import home from "./home.vue" import game from "./game.vue" //定义路由
const routes = [ { path: "/", redirect: "/home" },//重定向,指向了home组件 { path:
"/home", component: home, children: [ { path: "/home/game", component: game } ]
} ] //创建路由实例 const router = new VueRouter({routes}) new Vue({ el: '#app', data:
{ }, methods: { }, router })
home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。
<template> <div> <h3>首页</h3> <router-link to="/home/game"> <button>显示<tton> </
router-link> <router-view></router-view> </div> </template>
game.vue
<template> <h3>游戏</h3> </template>
现在的game组件就是home组件的子级路由了。如果还要嵌套继续在game中加children就可以了。

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy