Vue之子路由配置

素颜马尾好姑娘i 2022-04-18 04:08 272阅读 0赞

*  新建两个组件：  
    about1.vue

<template>
      <div>
        {
       {msg}}
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          msg:"这是about1页面"
        }
      },
    }
    </script>

<template>
      <div>
        {
       {msg}}
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          msg:"这是about2页面"
        }
      },
    }
    </script>

about2.vue

*  在router.js里的about配置子路由：

{
          path: '/about',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
          children:[
            {
              path: 'about1',
              component: About1
            },
            {
              path: 'about2',
              component: About2
            }
          ]
        },

*  About.vue配置子路由：

<template>
      <div class="about">
        这是about组件
        <div>
          <router-link to="/about/about1">about1</router-link>
          <router-link to="/about/about2">about2</router-link>
          <router-view></router-view>
        </div>
      </div>
    </template>

App.vue

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]: /images/20220418/58bc65bf26e5400a8589254fe6e4892b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70 1]: /images/20220418/ee5f25da0f794b25bee07e618498943a.png