vue 路由的内置组件 router-view 详细介绍（有图有真相）

介绍

• 当你的地址符合我的路由要求的时候，会把路由的组件在 你的界面中呈现，而这个界面实在 App.vue里面

---

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

---

功能介绍

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

router-view 代码介绍具体实现功能

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

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

---

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

• 比如我想让它这个地址栏内的内容是 http://127.0.0.1/my 的时候进入到我指定的页面
• 至于我的为什么是 127.0.0.1 地址变更文章

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

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

---

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

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

结果：

小结：

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

2. 而且只有一条

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

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

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

   router-view 当你的路由path 与访问的地址相符时，会将指定的组件替换该 router-view
   
   没错，就是它变成了你的组件

---

不信？

• 那咱们多写几个 router-view 试试
  
  看，我一口气写了 5 个，那么再看一下页面是怎么显示的
  当当当~~~