## router-link * 路由跳轉使用hash值切換頁面，不刷新頁面 * mode:'history'，使用history 模式， url 里沒有了#號 * 不能使用a標簽進行頁面切換，因為會跳轉刷新頁面，不是一個單頁面應用 * route-link 類似a標簽，可以在不刷新頁面狀況下切換頁面 ## 使用示例 1. 目標路徑固定 ``` <router-link to="/home">Home</router-link> ``` 2. 目標路徑動態綁定 ``` <router-link :to="homevar">Home</router-link> export default{ name:'App', data(){ return { homevar:'/home' } } } ``` 3. 目標地址使用對象配置 ``` <router-link to="{path:'/home'}">Home</router-link> ``` ## 單視圖 VS 多視圖 單視圖使用component ``` { path: '/', name: 'Home', component: Home } ``` 多視圖使用components 1. route的index.js 中 ``` const headerCmp = { template: '<div>頭部組件</div>' } const bodyCmp = { template: '<div>正文組件</div>' } const footerCmp = { template: '<div>底部組件</div>' } components: { default: bodyCmp, header: headerCmp, footer: footerCmp } ``` 2. App.vue中增加 ``` <router-view name="header"></router-view> <router-view></router-view> <router-view name="footer"></router-view> ``` 注意： 1. components的 header， footer 對應router-view的name屬性的值 2. 沒有設置name的是默認視圖，有name的是命名視圖