基于Vue Router 2018年8月的官方文档示例，改造一下，通过一个最简单的例子，解决很多初学者的一个困惑。
首先是官方文档示例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <router-view></router-view> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
效果如下
但此时，你点击子组件路由链接，会发现进入新路由后，页面外层的'Hello App!'等文字等仍然都在。不想要这些东西该怎么办？
其实这个很好办，先看咱们的新代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <router-view></router-view> </div> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> const Index = { template: '<div>index <router-link to="/foo">Go to Foo</router-link></div>' } const Foo = { template: '<div>foo <router-link to="/bar">Go to Bar</router-link></div>' } const Bar = { template: '<div>bar</div>' } const routes = [ { path: '/', component: Index }, { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
效果如下
关键点就是在写路由对象的时候，多写一个‘/’路径，这个路径对应咱们的首页组件，在这个首页组件里写跳转路由链接，另外就是在Vue示例挂载DOM里（这里是#app），我们只写一个<router-view></router-view>，用来渲染各个路由组件，
这样首页内容渲染的是首页组件的，其他页面也不会有多余的‘Hello App’显示在路由组件渲染后的页面上了。