vue2.0 路由学习笔记
2024-08-31 14:52:56
昨天温故了一下vue2.0的路由 做个笔记简单记录一下!
1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js
2.然后修改原有a标签处代码 这里以一个ul li a 为例
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
使用 router-link标签替换原有a标签出 router-link会默认生成一个a标签 里面的to="" 指的是访问 to="home" 就是访问home, to="news" 就是访问news 经过改装后代码如下
<ul>
<li><router-link to="/home">主页</router-likn></li>
<li><router-link to="/news">新闻</router-likn></li>
</ul>
3.在第一步的时候引入了vue-router.js 现在需要创建一个 路由的实例
const router = new VueRouter({
routes
})
上面的routes是具体的路由配置信息具体配置如下
const routes = [
{path:'/home',component:Home},
{path:'/news',component:News}
]
path指的是访问的网址 对应上面<router-link to="xxx">里的to属性,后面component指的是对应模板
4.最后需要在调用出指定我们定义的上述定义的router
new Vue({
router,
el:'xxxx'
})
总结:总体来讲vue2.0比起老版本要简单很多
最新文章
- 使用ASP.NET MVC、Rabbit WeixinSDK和Azure快速开发部署微信后台
- ExtJs之Ext.apply
- eclipse注册码生成,在eclipse3.3.x上测试可用
- mysql中对数据库的每个表执行优化的存储过程
- jQuery遍历对象、数组、集合实例
- hdu1429之BFS
- 《Java程序员面试笔试宝典》之Java程序初始化的顺序是怎样的
- Docker 安装及问题处理
- gridcontrol显示行号,总行,打印,导出Excel,设置标头及内容居中方法
- 百度富文本编辑器Ueditor使用
- 0e开头MD5值小结
- COCO 数据集的使用
- Element.scrollIntoView()
- 学习Acegi应用到实际项目中(11)- 切换用户
- 2019.03.25 bzoj4572: [Scoi2016]围棋(轮廓线dp)
- Netty学习路线总结
- L1-026 I Love GPLT
- 如何统计TFS代码库中的团队项目所占用的磁盘空间
- 【BZOJ3037/2068】创世纪/[Poi2004]SZP 树形DP
- Java-Runoob:Java Scanner 类
热门文章
- nutch的一些基础整理
- iis解析json
- CSS学习(四)
- iOS-UIImage imageWithContentsOfFile 和 imageName 对照
- Java 实现适配器(Adapter)模式
- zzulioj--1634--Happy Thanksgiving Day - A + B Problem(模拟水题)
- MapReduce 程序:WordCount
- 将枚举存入map集合
- (转载)[Android开发]zxing扫描结果乱码
- UVa 10943 How do you add?【递推】