基于Vue Router 2018年8月的官方文档示例,改造一下,通过一个最简单的例子,解决很多初学者的一个困惑。
首先是官方文档示例代码
Document Hello App!
Go to Foo Go to Bar
效果如下
但此时,你点击子组件路由链接,会发现进入新路由后,页面外层的'Hello App!'等文字等仍然都在。不想要这些东西该怎么办?
其实这个很好办,先看咱们的新代码
Document
效果如下
关键点就是在写路由对象的时候,多写一个‘/’路径,这个路径对应咱们的首页组件,在这个首页组件里写跳转路由链接,另外就是在Vue示例挂载DOM里(这里是#app),我们只写一个<router-view></router-view>,用来渲染各个路由组件,
这样首页内容渲染的是首页组件的,其他页面也不会有多余的‘Hello App’显示在路由组件渲染后的页面上了。