vue 获取url地址的参数_Vue之vuerouter的使用

1. 什么是vue-router?

所谓的vue-router, 通俗的来讲 就是路由 但是这个和后端路由是不同的, 这是前端路由,是url和单页面组件的对应关系, 也就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。 

2. vue-router的整合及抽取

VueRouter的整合的步骤是固定的

首先得先安装vue-router 使用npm i vue-router

1. 导入vue-router

2. 使用Vue.use()方法来注册路由

3. 导入单页面组件

4. 写路由规则

5. 实例化路由对象

6. 挂载到顶级Vue的实例上

b2d6a4b62554908aee08b118804cdec8.png

cb99ff1b18c651a237a39320b8c07737.png

其实路由的跳转其实就是我们之前所写的tab栏的效果, 只是他的功能更加强大一点, 而且对应的路由肯定会有对应的内容来显示的, 那么内容显示在哪儿呢? 其实就是使用router-view作为占位符, 将每次路由地址所指向的组件渲染在这个router-view占位的地方, 所以这就大大节省的我们的代码量, 但是这也存在一个问题,  所有的路由对应单一的组件, 那么如果需要携带参数呢? 比如查看某一id的详情内容, 或者修改某一id对应的内容 那么就必须携带id过去, 那么怎么携带呢? 这里就涉及另外一个知识点了, 就是动态路由匹配

3. 动态路由匹配

53cd6305f0e96138cedea37f321b1702.png

cc5e6253aae2500e1e2ce1ef1fbc2383.png

9ed7b06984406198531b8d4dec6836ce.png

我们在路由规则中使用:来对参数进行标记, 当解析这个地址的时候, 遇到:就当作参数来解析, 那么传值的时候, 直接传就可以了, 这就比较方便, 那么到了详情页面, 获取参数的时候, 直接使用this.$router.params.id来获取对应的id, 这是因为只要组件中使用了vue-router, 那么就会自动向data里面添加$router这样的一个参数 会把传输过程中的一些信息存储在这个参数里面, 方便取用

这个问题解决了, 接下来就是解决路由抽取的问题了

4. Vue-router的抽取

其实在实际的项目开发中,  我们会有很多的路由规则, 以及导入很多的组件, 那就为了功能明确, 我们需要把router相关的部分抽取出来

b320daf01849e86857c446dc6c5fb306.png

1960c348ee1a35bd4a7b6e44fba2b87e.png

这就是路由的基本使用,   想要是到更多用法, 请进入vue的官方文档查看

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值