vue-router(1)
来源:互联网 发布:网络cv设备 编辑:程序博客网 时间:2024/06/07 17:41
1.spa和路由
SPA:Single Page Application,单页面应用。
SPA的优缺点:
优点:提供流畅的用户体验,避免了不必要的跳转和重新渲染,服务器压力小。
缺点:不利于seo(搜索引擎页面),初次加载页面更耗时,历史管理需要编程实现
现在,我们面临着一个问题。在vue.js中,如何实现页面之间的切换呢?
回到vue.js中,在vue.js中,我们可以使用组件来替代页面的概念。
在vue中,我们所提到的页面,可以认为就是一个组件。
页面之间的切换,可以看做是组件之间的切换。
有一个动态组件的用法,可以实现组件之间的切换。
动态组件可以实现组件之间的切换,但是它的功能非常有限,不适合进行项目开发。
所以,需要有一个专业的工具来帮我们实现组件之前的切换。
这个工具就叫做路由。
所谓的路由,就是指给定一个请求,返回相应的页面(在vue的单页应用中,页面就是组件)。
而且,在单页应用中,路由是利用哈希(#)来实现的
2.基本使用
(1).下载
https://unpkg.com/vue-router/dist/vue-router.js
https://github.com/vuejs/vue-router
(2).在页面中引入
(3).实现步骤
比如,要实现三个组件之间的切换。
首页面组件
列表页组件
详情页组件
步骤:
1.先定义好三个组件
使用vue-router就不需要作为某个组件的子组件来注册。
2.在视图层面,需要使用router-link和router-view
router-link的作用,就好比是a标签,
router-view的作用,是用来占位的,组件显示的位置。
3.代码层面
需要实现如下三个步骤:
配置路由[path和component]
实例化路由对象
注入路由
- vue-router(1)
- vue-router路由(一)
- vue-router学习(一)
- vue开发(三)vue-router
- vue学习(四) vue-loader vue-router vue-cli
- vue-router
- vue-router
- vue-router
- vue-router
- Vue router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- usb转串口异步读取数据
- 背包DP合辑
- 某外企C++面试题
- Android BLE 开发资料汇总
- Spark机器学习之协同过滤算法使用-Java篇
- vue-router(1)
- MySQL 第四天
- python,Windows环境安装及导入beautifulsoup
- RSA密钥,JAVA与.NET之间转换
- java发送邮件
- 【yoyo】计算2018年1月1日距当天事件还剩多少天,多少小时,多少分钟,多少秒;
- Android初级开发(十一)——(转载)一篇文章轻松掌握Material Design
- 【多校训练】hdu 6085 Rikka with Candies bitset
- CNN 模型压缩与加速算法综述