Vue之子路由配置

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

  • 新建两个组件：
    about1.vue

about2.vue

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

    {

    1.   path: '/about',
    2.   name: 'about',
    3.   // route level code-splitting
    4.   // this generates a separate chunk (about.[hash].js) for this route
    5.   // which is lazy-loaded when the route is visited.
    6.   component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    7.   children:[
    8.     {
    9.       path: 'about1',
    10.       component: About1
    11.     },
    12.     {
    13.       path: 'about2',
    14.       component: About2
    15.     }
    16.   ]
    17. },

  • About.vue配置子路由：

App.vue

  1. <template>
  2.   <div id="root">
  3.     <router-link to="home">首页 \</router-link>
  4.     <router-link to="about">关于</router-link>
  5.     <router-view></router-view>
  6.   </div>
  7. </template>

在这里插入图片描述

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，324人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue中路由嵌套（子路由）

    路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。 根据我们前面学习的VueRouter的知识，可以直接写出代码来实

    野性酷女野性酷女/ 0 赞/ 354 阅读

    相关 Vue之路由

    Vue之路由 1. \\后端路由：\\对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2. \\前端路由：\\对于单页面应用程

    忘是亡心i忘是亡心i/ 0 赞/ 383 阅读