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的实例上

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

3. 动态路由匹配

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

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

4. Vue-router的抽取

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

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