路由和history

官方文档参考 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 组件的注释

现在我们分别访问已经可以看到页面的变化了

http://localhost:8080/#/

http://localhost:8080/#/hello

可以看出只要我们配置了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
    }
  ]
})

再次访问页面看看变化

http://localhost:8080/

http://localhost:8080/hello