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的官方文档查看

vue 获取url地址的参数_Vue之vuerouter的使用相关推荐

vue 获取url地址的参数_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
vue 获取url地址的参数_2020年 vue常见面试问题总结(干货)！
1.什么是mvvm模式,谈谈你的理解? MVVM - Model View ViewModel,数据,视图,视图模型 view 可以通过事件绑定的方式影响 model, model 可以通过数据 ...
Javascript获取URL地址的参数
什么是URL地址的参数在网页访问的时候,我们会通过url地址来传递参数. 例如,url地址类似: http://www.pingbuwang.com/index.html?a=12&b=he ...
Vue 获取URL中的参数
实现效果如下: 获取URL中的参数,并显示在页面上流程: 1.在index.js中编辑代码如下: import {createRouter,createWebHashHistory} from 'v ...
获取Url地址中参数的3种方法
获取Url的代码如下:window.location.href; 方法一:原生js(假设已经获得了Url地址) var url = 'https://gitbook.cn/gitchat/geekbo ...
vue获取url地址中的参数
首先获取到url地址 let geturl = window.location.href // http://localhost:8081/#/pages/index/index?qycode=100 ...
gitclone 一个tag的地址_获取Url地址中参数的几种方法
获取Url的代码如下:window.location.href; 方法一:原生js(假设已经获得了Url地址) 总结:主要思路就是将Url用split()分割成不同的块,返回值为一个数组,一直分割到为 ...
获取url地址后面参数的2种方法（小程序二维码跳转参数解析）
微信扫描小程序二维码后,在页面的onLoad函数的参数options内可以拿到跳转参数scene值,但是需要对scene进行decodeURIComponent操作,方法如下: 方法一: 扫码二维码地 ...
Angular4_获取当前Url地址和获取Url传递的参数
import { Location } from '@angular/common'; console.log(location.pathname); 以上就是获取URL地址获取参数: import ...

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

vue 获取url地址的参数_Vue之vuerouter的使用相关推荐

最新文章

热门文章