官方文档参考 https://router.vuejs.org/zh-cn/
后台页面是有导航的，通过点击导航链接跳转不同的页面，下面我们来实现一下点击路由的页面跳转
项目代码里现在有两个组件，一个是默认创建的HelloWorld，另一个是上一节我们定义的MyHelloWorld，我们先让它们可以根据url的变化显示对应的组件
修改src/router/index.js 的代码
export default new Router({
routes: [
{
path: '/',
name: 'MyHelloWorld',
component: MyHelloWorld
},
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
}
]
})
别忘了去掉顶部引入HelloWorld 组件的注释
现在我们分别访问已经可以看到页面的变化了
可以看出只要我们配置了routes里path对应的组件，url路由访问的页面就会解析的相应的组件上
下面我们在组件里增加链接来实现在页面中点击跳转
先修改MyHelloWorld使用 router-link to 来跳转
<router-link to="/hello">goto hello</router-link>
完整的代码
const MyHelloWorld = {
template: '<div><my-title title="我是标题">我是变的<br>我也是<hr>我还是</my-title><router-link to="/hello">goto hello</router-link></div>'
}
再去src\components\HelloWorld.vue 里在这个组件页面下方增加一个链接跳回 MyHelloWorld 这次我们换个写法，命名路由
<router-link :to="{ name: 'MyHelloWorld' }">goto myhelloworld</router-link>
我们尽量的使用命名路由来实现路由的跳转，这样的好处是当url变化时只要该routes里的相应的path就可以了
看看完整的 HelloWorld.vue 代码
## history
我们看到url的样子是 `localhost:8080/#/hello` 或者是 `/#/` 这个样子, 这是hash路由，具体什么是url hash去百度一下url的构成，
通过HTML5 History 模式我们将它改成 `localhost:8080/hello` 和 `localhost:8080/` 这样和我们传统的服务端处理url一样的
修改`src/router/index.js` 增加 `mode: 'history'` 的配置
```javascript
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'MyHelloWorld',
component: MyHelloWorld
},
{
path: '/hello',
name: 'HelloWorld',
component: HelloWorld
}
]
})
再次访问页面看看变化
