vue 路由的内置组件 router-view 详细介绍

• 当你打开 App.vue就会在里面发现这两个组件
• 这两个是 vue 给你提供的两个 vue 内置组件

router-link 实现路由之间的跳转
router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

第一步：创建你的组件（相应的页面）

• 这个文件可以放在任意的地方，但是我强烈建议你建一个文件夹放在里面
• 这是我创建的组件（页面）

第二步：在路由中写入对应的地址

• 比如我想让它这个地址栏内的内容是 http://127.0.0.1/my 的时候进入到我指定的页面

    {
      path:'/my',
      component:()=>import('../components/my.vue')
    },
  

是在这里写入路由组件⬇⬇ 

第三步：在浏览器中输入相应的地址

• vue 是热更新，所以不需要刷新页面就可使用
  

结果：

可以看到我们结果的页面是显示我们在组件中的内容

而且只有一条

你是不是好奇他是怎么渲染到那的？

你说我只写了一个 div， 错，那是因为组件中只能有一个根元素

这时你想一下，我们开头提到的 router-view

router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view

没错，就是它变成了你的组件

那咱们多写几个 router-view 试试

 看，我一口气写了 5 个，那么再看一下页面是怎么显示的