- 现在的应用都流行SPA应用(single page application)
传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网络、性能影响,浏览器会出现不定时间的空白界面,用户体验不好。
单页面应用就是用户通过某些操作更改地址栏url之后,动态的进行不同模板内容的无刷新切换,用户体验好。
Vue中会使用官方提供的vue-router插件来使用单页面,原理就是通过检测地址栏变化后将对应的路由组件进行切换(卸载和安装)
2、简单的路由实现
安装vue-router:
cnpm install vue-router -S or yarn add vue-router -S
(1)引入vue-router,需要通过Vue.use来注册插件
(2)创建router路由器
(3)创建路由表并配置在路由器中
(5)在根实例里注入router,目的是为了让所有的组件里都能通过this.$router、this. $route来使用路由的相关功能api
(6)利用router-view来指定路由切换的位置
(7)使用router-link来创建切换的工具,会渲染成a标签,添加to属性来设置要更改的path信息,且会根据当前路由的变化为a标签添加对应的router-link-active/router-link-exact-active(完全匹配成功)类名
vue-router简单介绍
最新推荐文章于 2023-05-24 10:21:47 发布