vue搭建子路由

前言

在Vue框架中，我们可以使用Vue Router来实现子路由。Vue Router是Vue.js官方的路由管理器，它允许我们在单页面应用中创建多个组件，并通过URL进行导航。子路由是指嵌套在父路由之下的路由，它们可以在父路由的基础上进一步扩展应用的功能。

Vue Router配置

首先，我们需要安装Vue Router。可以通过npm或yarn来安装Vue Router：

npm install vue-router
或
yarn add vue-router

安装完成后，在创建Vue应用的入口文件（一般是main.js）中引入Vue Router，并使用Vue.use()方法注册它：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

new Vue({
  render: h => h(App),
}).$mount('#app')

子路由配置

要配置子路由，我们需要创建一个路由配置对象。这个对象包含了父路由和子路由的映射关系。在路由配置对象中，我们可以使用children字段来定义子路由。

import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'about',
        component: About
      },
      {
        path: 'contact',
        component: Contact
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，我们定义了三个组件：Home、About和Contact。父路由的路径是'/'，子路由的路径是'about'和'contact'。当用户访问'/about'时，会渲染About组件；当用户访问'/contact'时，会渲染Contact组件。

总结

通过Vue Router的配置，我们可以很容易地搭建子路由。通过定义好路由配置对象和父子组件的映射关系，我们可以实现多层级的路由嵌套，以便更好地组织和管理Vue应用。