vue中如何写子路由

在Vue中写子路由的方法如下：

1、在父路由中定义子路由，2、在父组件中使用来显示子路由的内容。具体步骤如下：

在父路由中定义子路由

在Vue项目的router/index.js文件中，我们需要在父路由中定义子路由。假设我们有一个父组件Parent，并且需要在其下面定义Child组件作为子路由。

import Vue from 'vue';
import Router from 'vue-router';
import Parent from '@/components/Parent.vue';
import Child from '@/components/Child.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child', // 注意，这里没有斜杠
          component: Child
        }
      ]
    }
  ]
});

在上面的代码中，我们定义了一个父路由/parent，并在其下定义了一个子路由child。

在父组件中使用来显示子路由的内容

在父组件Parent.vue中，我们需要使用<router-view>来显示子路由的内容。
```
<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Parent'
};
</script>
```
这样，当我们访问/parent/child时，Parent组件会显示Child组件的内容。

一、定义父路由

要在Vue中定义父路由，需要在router/index.js文件中指定父组件，并在父组件路径下嵌套子路由。以下是定义父路由的步骤：

导入Vue和Router
导入父组件和子组件
使用Vue.use()来使用Router
创建并导出新的Router实例

import Vue from 'vue';
import Router from 'vue-router';
import Parent from '@/components/Parent.vue';
import Child from '@/components/Child.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child', // 注意，这里没有斜杠
          component: Child
        }
      ]
    }
  ]
});

在上述代码中，我们定义了/parent作为父路由路径，并在其下嵌套了子路由child。

二、在父组件中使用

在父组件中，我们需要使用<router-view>来显示子路由的内容。以下是父组件的代码示例：

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Parent'
};
</script>

<router-view>是一个占位符，它将根据子路由的路径来渲染相应的子组件。当访问/parent/child时，Child组件的内容将显示在<router-view>中。

三、访问子路由

为了访问子路由，我们需要在浏览器地址栏中输入子路由的完整路径。例如，在上述示例中，访问/parent/child将显示Child组件的内容。以下是访问子路由的步骤：

打开浏览器
在地址栏中输入http://localhost:8080/parent/child
浏览器将显示父组件和子组件的内容

四、动态路由匹配和嵌套路由的使用

Vue Router还支持动态路由匹配和更复杂的嵌套路由结构。以下是动态路由和嵌套路由的示例：

定义动态路由参数
在父路由中嵌套多个子路由

import Vue from 'vue';
import Router from 'vue-router';
import Parent from '@/components/Parent.vue';
import ChildA from '@/components/ChildA.vue';
import ChildB from '@/components/ChildB.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/parent/:id',
      component: Parent,
      children: [
        {
          path: 'child-a',
          component: ChildA
        },
        {
          path: 'child-b',
          component: ChildB
        }
      ]
    }
  ]
});

在上述代码中，我们定义了一个动态路由参数:id，并在父路由中嵌套了两个子路由child-a和child-b。访问路径/parent/123/child-a将显示ChildA组件的内容。

五、命名视图的使用

有时我们需要在同一个父路由中渲染多个子组件，这可以通过使用命名视图来实现。以下是命名视图的示例：

定义命名视图
在父组件中使用多个<router-view>标签

import Vue from 'vue';
import Router from 'vue-router';
import Parent from '@/components/Parent.vue';
import ChildA from '@/components/ChildA.vue';
import ChildB from '@/components/ChildB.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child-a',
          components: {
            default: ChildA,
            sidebar: ChildB
          }
        }
      ]
    }
  ]
});

<template>
  <div>
    <h1>Parent Component</h1>
    <router-view></router-view>
    <router-view name="sidebar"></router-view>
  </div>
</template>
<script>
export default {
  name: 'Parent'
};
</script>

在上述代码中，我们定义了一个命名视图sidebar，并在父组件中使用了两个<router-view>标签。访问路径/parent/child-a将同时显示ChildA和ChildB组件的内容。

六、重定向和别名

Vue Router还支持路由重定向和别名。以下是重定向和别名的示例：

定义重定向
定义别名

import Vue from 'vue';
import Router from 'vue-router';
import Parent from '@/components/Parent.vue';
import Child from '@/components/Child.vue';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    },
    {
      path: '/redirect',
      redirect: '/parent/child'
    },
    {
      path: '/alias',
      component: Child,
      alias: '/shortcut'
    }
  ]
});

在上述代码中，我们定义了一个重定向/redirect，它将重定向到/parent/child，以及一个别名/alias，它将/shortcut路径映射到Child组件。

七、导航守卫的使用

为了在路由导航时执行特定的逻辑，可以使用导航守卫。以下是导航守卫的示例：

定义全局导航守卫
定义路由独享的导航守卫

import Vue from 'vue';
import Router from 'vue-router';
import Parent from '@/components/Parent.vue';
import Child from '@/components/Child.vue';
Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
});
router.beforeEach((to, from, next) => {
  // 全局导航守卫逻辑
  console.log('Global guard');
  next();
});
router.beforeResolve((to, from, next) => {
  // 全局解析守卫逻辑
  console.log('Global resolve guard');
  next();
});
router.afterEach((to, from) => {
  // 全局后置钩子逻辑
  console.log('Global after each');
});
export default router;

在上述代码中，我们定义了全局导航守卫beforeEach、全局解析守卫beforeResolve和全局后置钩子afterEach，它们将在路由导航时执行相应的逻辑。

八、路由懒加载的使用

为了优化性能，我们可以使用路由懒加载来按需加载组件。以下是路由懒加载的示例：

使用动态导入语法

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const Parent = () => import('@/components/Parent.vue');
const Child = () => import('@/components/Child.vue');
export default new Router({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
});

在上述代码中，我们使用动态导入语法import()来按需加载Parent和Child组件，从而优化性能。

总结：在Vue中编写子路由需要在父路由中定义子路由，并在父组件中使用<router-view>来显示子路由的内容。通过使用动态路由匹配、命名视图、重定向和别名、导航守卫以及路由懒加载等高级特性，可以实现更加灵活和高效的路由管理。建议在实际项目中根据需求选择合适的路由配置方式，以确保应用的可维护性和性能。