zoukankan      html  css  js  c++  java
  • vue嵌套路由(父子路由)

    配置父子路由关系,A.vue和B.vue是Main.vue的子组件:

    {
          path: '/main/',
          name: 'main',
          component: () => import('components/Main.vue'),
          children: [
            {
              path: 'a',
              name: 'a',
              component: () => import('components/A.vue')
            },
            {
              path: 'b',
              name: 'b',
              component: () => import('components/B.vue')
            }
          ]
        }
    

    编写两个简单的子组件:

    • 一个是A.vue
    <template>
      <h1>This is A</h1>
    </template>
    
    <script>
      export default {
        name: "A"
      }
    </script>
    
    <style>
    </style>
    
    • 一个是B.vue
    <template>
      <h1>This is B</h1>
    </template>
    
    <script>
      export default {
        name: "B"
      }
    </script>
    
    <style>
    </style>
    
    • 然后编写父组件Main.vue
    <template>
      <div style="margin-left: 300px;">
        <router-link :to="{name:'a'}"><span style="font-size: 50px;">A</span></router-link>
        <router-link :to="{name:'b'}"><span style="font-size: 50px;">B</span></router-link>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>
    

    路由导航<router-link :to="{name:'a'}"><router-link :to="{name:'b'}">导向到子路由。
    <router-view></router-view>用来显示子路由对应的内容,即子路由对应页面的显示区域。

    修改路由配置,添加redirect: {name: "a"},使输入/main/时自动重定向到/main/a

    {
          path: '/main/',
          name: 'main',
          component: () => import('components/Main.vue'),
          redirect: {name: "a"},
          children: [
            {
              path: 'a',
              name: 'a',
              component: () => import('components/A.vue')
            },
            {
              path: 'b',
              name: 'b',
              component: () => import('components/B.vue')
            }
          ]
        }
    
  • 相关阅读:
    F. Xor-Paths 题解(折半搜索)
    Integers Have Friends 2.0 题解(随机+同余)
    3-爬虫框架-大规模异步并发爬虫
    2-爬虫框架-网址池的实现
    1-爬虫框架-download和MySQL封装
    [gym102220I]Temperature Survey
    [atAGC034F]RNG and XOR
    [luogu5564]Say Goodbye
    [cf1349D]Slime and Biscuits
    [bzoj3569]DZY Loves Chinese II
  • 原文地址:https://www.cnblogs.com/CharrammaBlog/p/13401203.html
Copyright © 2011-2022 走看看