vue的简单路由

最新推荐文章于 2024-06-05 13:09:38 发布

请勿逼逼赖赖

最新推荐文章于 2024-06-05 13:09:38 发布

阅读量235

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_46238956/article/details/116273731

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue中配置路由，包括在App.vue中设置根路由，并在index.js中注册子路由。重点讲解了父子路由的关系，如在index.vue中通过`router-link`导航到son和event，这两个路由在App.vue的`router-view`中渲染，形成同级路径。同时，当在son中跳转到left时，会先退出son，进入index后再展示left组件，展示了Vue路由的层级结构和导航行为。

摘要由CSDN通过智能技术生成

App.vue

<div id="app">
    <router-view/>
  </div>

App.vue看作所有父路由，根目录，在App.vue的’router-view中，加载所有下级目录，index，son，event
默认加载index的“/”路径

index.js

{
          path: '/',
          name: 'index',
          component: index,
          children:[
              {
                  path: '/left',
                  name: 'left',
                  component: left
              },
              {
                  path: '/right',
                  name: 'right',
                  component: right
              }
          ]
      },
      {
          path: '/event',
          name: 'event',
          component: event
      },
      {
          path: '/son',
          name: 'son',
          component: son
      }

index.vue

{{msg}}
        <router-link to="/son">son</router-link>
        <router-link to="/left">left</router-link>
        <router-link to="/right">right</router-link>
        <router-link to="/event">event</router-link>

        <router-view/>

点击son和event，都会替换调index，在App.vue的router-view/中渲染son或者event，看作index的同级路径
在index中有router-view/，index 的子路由会在这里渲染，vue是有明确的路由级别的，如果在son中跳转left，会先退出son，进入同级的index，在index 的router-view/视图中展示left组件。