官方文檔參考 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)在我們分別訪問(wèn)已經(jīng)可以看到頁(yè)面的變化了
可以看出只要我們配置了routes里path對(duì)應(yīng)的組件啊终，url路由訪問(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
}
]
})
再次訪問(wèn)頁(yè)面看看變化
