在实际项目中我们会碰到多层嵌套的组件组合而成,但是我们如何实现嵌套路由呢?
其实很简单,只需要我们在 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就可以了。

技术
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信