vue子路由怎么配置-前端问答-PHP中文网

vue子路由怎么配置

王林

发布： 2023-05-25 11:03:08

原创

1907人浏览过

vue是一款流行的javascript框架，用于构建可交互的web应用程序。vue的路由功能可以让我们创建单页应用（spa），不同的路由对应着不同的组件，然后在组件中渲染指定的内容。子路由是vue路由中的一种特殊路由类型，可用于嵌套在其他路由之内。本文将介绍如何在vue中配置子路由。

首先，我们需要确保已经安装了Vue及其相关依赖，最好使用Vue CLI创建新项目。接下来，我们需要创建Vue组件并定义路由。

定义父路由
在父组件中定义路由（一般为根路由/），为子组件提供容器。

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

登录后复制

定义子路由
然后，在父组件中为子组件创建一个路由指向。

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'about',
        name: 'About',
        component: () => import('../views/About.vue')
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

登录后复制

在这个例子中，“/”是根路由，它指向了Home组件。我们为Home组件创建了一个子路由为“/about”，它指向了About组件。

立即学习“前端免费学习笔记（深入）”；

在父组件模板中添加子组件容器
在Home组件的模板中，我们需要添加一个占位符容器来呈现子组件。

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

登录后复制

这个“router-view”指令就是子组件容器，它将显示通过子路由指定的组件。

在子组件模板中添加内容
在About组件的模板中，我们可以添加一些内容来展示它是什么。

<template>
  <div>
    <h1>About</h1>
    <p>This is an about page.</p>
  </div>
</template>

登录后复制

现在，我们已经成功地配置了一个Vue子路由。测试一下，看看能否正常显示。

总结
配置Vue子路由有三个基本步骤。这些步骤包括：

定义父路由：在根路由声明父组件，并且将其路由导航到这个组件。

定义子路由：在父组价中为子组件创建路由指向。

在父组件模板中添加子组件容器：将子组件插入到占位符元素中。

在子组件模板中添加内容：为子组件提供内容以展示其功能。

最后提醒一下，当你在Vue中使用子路由时，必须保持路径正确。路径必须从父组件开始，以斜杠（/）开头。

以上就是vue子路由怎么配置的详细内容，更多请关注php中文网其它相关文章！