本文主要是介绍vue学习之2.vue-router，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
源码demo2：https://gitee.com/usaliva/vue_learning
router-view
组件配置的路由渲染到 <router-view> 标签里。
路由跳转
使用<router-link>标签跳转，它渲染一个a标签， to 属性配置跳转：
- path，例如：to="/product"
- name，例如：:to="{name:‘product’}"
使用方法跳转，参考文档
- router.push
- router.replace
- router.go
- router.back
- router.forward
history模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
hash模式会有一个 #：http://localhost:8080/#/home
vue-router可以开启history模式，这种模式使用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
在创建router实例时，开启history模式(mode:‘history’)
history模式url：http://localhost:8080/home
404配置
后台配置
如果后台没有正确的配置，当用户在浏览器直接访问 http://localhost:8080/home 就会返回 404。
nodejs+express可以使用中间件 connect-history-api-fallback
路由配置
后台配置完，所有not found页面都会跳转到 index.html 或 指定的页面。
为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。
const router = new VueRouter({mode: 'history',routes: [{ path: '*', component: NotFoundComponent }]
})
publicPath
虽然像正常url一样跳转，但刷新页面可能会因为资源路径（js css）报错。
原因可能是生成的html中使用相对路径注入资源。
配置output的publicPath使资源使用绝对路径。
// webpack.config.js
output: {publicPath: '/',path: path.join(__dirname, '../dist'),
}
keep-alive
使用keep-alive可以保留路由的状态。
<keep-alive><router-view></router-view>
</keep-alive>
这篇关于vue学习之2.vue-router的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
