官方文檔參考 https://router.vuejs.org/zh-cn/

后臺(tái)頁(yè)面是有導(dǎo)航的，通過(guò)點(diǎn)擊導(dǎo)航鏈接跳轉(zhuǎn)不同的頁(yè)面，下面我們來(lái)實(shí)現(xiàn)一下點(diǎn)擊路由的頁(yè)面跳轉(zhuǎn)

項(xiàng)目代碼里現(xiàn)在有兩個(gè)組件，一個(gè)是默認(rèn)創(chuàng)建的HelloWorld，另一個(gè)是上一節(jié)我們定義的MyHelloWorld，我們先讓它們可以根據(jù)url的變化顯示對(duì)應(yīng)的組件

修改src/router/index.js 的代碼

export default new Router({
  routes: [
    {
      path: '/',
      name: 'MyHelloWorld',
      component: MyHelloWorld
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

別忘了去掉頂部引入HelloWorld 組件的注釋

現(xiàn)在我們分別訪(fǎng)問(wèn)已經(jīng)可以看到頁(yè)面的變化了

http://localhost:8080/#/

http://localhost:8080/#/hello

可以看出只要我們配置了routes里path對(duì)應(yīng)的組件，url路由訪(fǎng)問(wèn)的頁(yè)面就會(huì)解析的相應(yīng)的組件上

下面我們?cè)诮M件里增加鏈接來(lái)實(shí)現(xiàn)在頁(yè)面中點(diǎn)擊跳轉(zhuǎn)

先修改MyHelloWorld使用 router-link to 來(lái)跳轉(zhuǎn)

<router-link to="/hello">goto hello</router-link>

完整的代碼

const MyHelloWorld = {
  template: '<div><my-title title="我是標(biāo)題">我是變的<br>我也是<hr>我還是</my-title><router-link to="/hello">goto hello</router-link></div>'
}

再去src\components\HelloWorld.vue 里在這個(gè)組件頁(yè)面下方增加一個(gè)鏈接跳回 MyHelloWorld 這次我們換個(gè)寫(xiě)法，命名路由

<router-link :to="{ name: 'MyHelloWorld' }">goto myhelloworld</router-link>

我們盡量的使用命名路由來(lái)實(shí)現(xiàn)路由的跳轉(zhuǎn)，這樣的好處是當(dāng)url變化時(shí)只要該routes里的相應(yīng)的path就可以了

看看完整的 HelloWorld.vue 代碼

## history

我們看到url的樣子是 `localhost:8080/#/hello` 或者是 `/#/` 這個(gè)樣子, 這是hash路由，具體什么是url hash去百度一下url的構(gòu)成，
通過(guò)HTML5 History 模式我們將它改成 `localhost:8080/hello` 和 `localhost:8080/` 這樣和我們傳統(tǒng)的服務(wù)端處理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
    }
  ]
})

再次訪(fǎng)問(wèn)頁(yè)面看看變化

http://localhost:8080/

http://localhost:8080/hello