软件测试学习笔记丨 Vue 路由 - 嵌套路由

作者：测试人

2024-06-11
北京
本文字数：813 字
阅读完需：约 3 分钟

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/23494

嵌套路由

概念

通过路由规则的层级嵌套，在页面中显示复杂的组件结构关系

特点

父级路由中存在子级路由

功能：

点击父级路由链接，显示模板内容
模板内容中又有子级路由的链接
点击子级路由链接显示子级模板的内容

嵌套路由用法

通过路由规则的 children 属性，设置子路由

定义父路由和子路由（index.js）：

import Vue from 'vue'import VueRouter from 'vue-router'import Layout from '../views/Layout.vue'import Login from '../views/Login.vue'import Register from '../views/Register.vue'
Vue.use(VueRouter)
// 定义路由const routes = [  {    path: '/layout',    name: 'layout',    component: Layout,    // 通过children属性定义子路由，是数组嵌套字典的形式    children: [      // 相对路径写法      { path: "login", component: Login },      { path: "register", component: Register },      // 绝对路径写法      // { path: "/layout/login", component: Login },      // { path: "/layout/register", component: Register },    ]  },]
const router = new VueRouter({  routes})
export default router

复制代码

父路由对应页面：

<template>  <!-- App.vue -->  <v-app>    <v-navigation-drawer app>      <!-- -->    </v-navigation-drawer>
    <v-app-bar app>      <!-- -->    </v-app-bar>
    <v-main>      <!-- 给应用提供合适的间距，内容区域 -->      <v-container fluid>        <!--vue-router 将设置好的子路由组件显示在这里-->        <router-view></router-view>      </v-container>    </v-main>
    <v-footer app>      <!-- -->    </v-footer>  </v-app></template>

复制代码

子路由对应页面：

<template>  <div class="login">    <h1>登录 页面</h1>  </div></template>

复制代码

软件测试开发免费视频教程分享

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/58be459866881bd5d3f1c7d24】。文章转载请联系作者。

测试人

关注

专注于软件测试开发 2022-08-29 加入

霍格沃兹测试开发学社，测试人社区：https://ceshiren.com/t/topic/22284

发布

暂无评论

创作场景

软件测试学习笔记丨 Vue 路由 - 嵌套路由

嵌套路由

嵌套路由用法

软件测试开发免费视频教程分享

测试人

评论