## 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的是命名视图