介绍

当你的地址符合我的路由要求的时候，会把路由的组件在 你的界面中呈现，而这个界面实在 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 是热更新，所以不需要刷新页面就可使用

结果：

小结：

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

而且只有一条

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

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

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

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

不信？

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