vue获取参数的方式有哪些

本篇内容主要讲解“vue获取参数的方式有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue获取参数的方式有哪些”吧!1.1.1 什么是SPA？SPA（single-page application），只有一个HTML页面，通过路由实现页面内的局部切换，公共资源部分只加载一次。我们熟知的JS框架如react,vue,angular,ember都属于SPA。1.1.2 什么是MPA（多页面应用）平常写的普通页面就是MPA，通过a标签实现页面切换，每次切换页面都要重新加载公共资源部分。1.1.3 SPA和MPA的区别1.1.4 SPA的优缺点优点：1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小2，前后端分离3，页面效果会比较炫酷（比如切换页面内容时的专场动画）缺点：1，不利于seo（搜索引擎优化（Search Engine Optimization,SEO）是一种通过了解搜索引擎的运行规则来调整网站，以提高目标网站在有关搜索引擎内排名的方式）；2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）3，不支持低版本的浏览器，最低只支持到IE94，初次加载时耗时多5，页面复杂度提高很多简单举例说明，假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：那么其路径就分别是 /，/about，/concat。当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URL 中的路径 /about，在 Web 服务的程免费云主机域名序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。简单的说，路由是根据不同的 url 地址展示不同的内容或页面。路由的概念在软件工程中出现，最早是在后端路由中实现的。服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。前端路由是如何做到URL和内容进行映射呢？监听URL的改变。1.3.1 URL的hashURL的hash也就是锚点(#), 本质上是改变window.location的href属性；我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作。hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。1.3.2 HTML5的History14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面；通过vue的路由可实现多视图的单页面Web应用。VueRouter文档我们之前使用过is特性来实现动态组件，vue-router的实现原理与之类似。vue-router展示不同的页面事实上就是动态加载不同的组件。当我们的地址栏发生了变化，vue-router就会监听到。根据它里面配置的匹配规则，展示不同的组件。2.1.1 直接下载2.1.2 使用CDN地址2.1.3 脚手架在使用脚手架搭建项目时，选择 Vue-router，项目创建好之后默认安装vue-router。如果创建项目时，没有选择，也可以使用模块化开发的方式。执行如下的命令来安装Vue Router。2.2.1 使用router-link组件来定义导航在app.vue的template中修改成如下代码2.2.2 指定组件的渲染位置通过router-view组件指定组件的渲染位置。当单击链接router-link的时候，会在router-view所在的位置渲染组件的模板内容。可以把router-view理解为占位符。再准备好样式2.2.3 定义路由组件也就是每个链接显示的内容，这里只是演示前端路由的基本用法，所以组件定义很简单。新建两个文件 About.vue和News.vue2.2.4 定义路由，创建路由实例src目录下新建一个router文件夹，如果创建项目时，已经选择了Vue-router则会自动创建。创建index.js文件，代码如下：2.2.5 挂载路由实例对象在main的js中，挂在路由实例对象.上面的案例中，当我们切换路由时发现地址栏后面会自动再加一个“#”。为什么是这种显示模式呢？因为在使用Vue Router创建路由实例时，默认采用的是hash路由配置模式。这种模式的优点是各种浏览器的兼容性比较好。但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的”#”（微信分享页面就会把”#”后边的内容处理掉），所以我们可以将路由实例修改为history路由模式。只需要在创建路由实例时，设置mode选项为history即可。这种history路由模式的缺点是URL兼容性不好，并且惧怕刷新。观察生成的HTML代码，会发现在当前导航中多了两个class类名。但是此类名并没有设置样式，需要自己手动设置具体样式。需要注意的是，样式名取最后一个即可，这两者的区别在后面学习嵌套路由时再说明。另外，如果觉得系统默认样式名太长，不好记忆可以进行修改。在创建路由实例时，可通过linkActiveClass选项，设置样式名。还有一个问题，不论哪种路由模式，刚打开页面既没有显示【关于我们】的内容，也没显示【新闻】链接的内容。我们可以在配置路由时，在增加一个路由，作用是：找不到路由时，重定向到about。 可以理解为备胎，最后实在没招了，就匹配备胎了。【router-link】默认会转为【a标签】，实际上可以添加tag属性来转为指定的标签，比如转为【buttton标签】或【li标签】等。不过vue-router4.x 之后废弃了 tag 而使用（v-solt）插槽来实现如果全是用一级路由时，路由管理就变得很臃肿，有点乱，路由有父子关系的话，嵌套路由会更好。嵌套路由也就是路由中的路由的意思，组件中可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，在vue组件中使用就可以了。举例：我们上面的例子中，添加一个books路由，单击“图书”链接，以列表的形式显示所有图书的书名，进一步单击单个书名链接，在Books视图中显示图书的详细信息。在asssets目录下新建一个books.js文件，里面是图书数据这里只是为了演示需要，真实场景中，图书数据应该是通过ajax请求从服务器端加载而来。3.1.1. 在父组件中添加导航修改Books.vue,以列表方式显示图书数据，添加导航链接，并使用【router-view】来指定book组件渲染的位置3.1.2.添加子路由显示的组件新建Book.vue,代码如下。3.1.3.配置父路由的children属性在router目录下的index.js中修改代码如下：（1）要在嵌套的出口（即Books组件中的router-view）中渲染组件，需要在routes选项的配置中使用children选项。children选项只是路由配置对象的另一个数组，如同routes本身一样，因为，可以根据需要继续嵌套配置。（2）以‘/’开头的嵌套路径被视为根路径。上面的子路由导航中，如果path是“/book”则会出错。完成以上步骤后，我们点击图书就可以看到进入图书详情页面了，但是我们还需要在该页面中看到点击图书的详情信息，这就意味这我们需要将父组件Books.vue中的被点击图书的ID传递给Book.vue组件。在进行表单提交、组件跳转等操作时需要使用到上一个表单、组件中的一些数据。此时就需要将参数在路由间进行传递。将需要的参数以 【key = value】的方式放在URL地址中。这里的参数值“id”可以通过当前组件的表单输入来获取。那么进入book组件后如何获取传入的参数呢？当将实例化的VueRouter对象挂载到Vue实例后，Vue Router在Vue实例上创建了两个属性对象。即 r o u t e r ( r o u t e r 实 例 ) 和 router(router实例)和 router(router实例)和route（当前页面的路由信息）。通过【this.$route.query】可以获取query查询参数。我们也可以使用动态参数的方式传递参数，比如 【book/1】。那【1】分别代表什么？这个需要在路由中指明。与query查询参数不同的是，在定义路由信息时，需要以占位符【：参数名】的方式将需要传递的参数指定到路由地址中，否则系统不能识别传递的参数。在路由中指定参数的含义，代码如下：进入Book.vue组件时如何获取传递过来的参数？这与获取query参数的方式相同，可以通过【 r o u t e 】 获 取 当 前 路 由 信 息 ， 通 过 【 route】获取当前路由信息，通过【 route】获取当前路由信息，通过【route.params.参数名】的方式获取动态参数。参数名也就是在路由中设置的参数名（/：后面的）路由对象还有其他属性，如【$route.path】，可以获取当前路由的路径。接下来实现在Book.vue组件中显示点击书籍的详细信息。修改Books.vue代码如下：修改book.vue代码如下：图书ID：{{book.id}}书名：{{book.title}}说明：{{book.desc}}实际场景中，当单击某本图书链接时，应该向服务器端发起Ajax请求来获取图书详细数据，于是我们想到在Book组件中通过生命周期钩子函数来实现，然而，这行不通。这是因为当两个路由都渲染同一个组件时，例如，从book/1导航到book/2时，vue会复用先前的Book实例，比起销毁旧实例再创建新实例，复用会更加高效。但是这就意味着组件的生命周期钩子不会再被调用，所以也就无法在生命周期钩子中根据路由参数的变化来实现更新数据。要对同一组件中的路由参数更改作出响应，只需监听$route对象。当路由参数变化时，更新图书详细数据。Book.vue代码修改如下：(1)只有路由参数发生变化时， route 对象的监听器才会被调用 ，这意味着第一次渲染Book组件时 ，通过 route对象的监听器才会被调用，这意味着第一次渲染Book组件时，通过 route对象的监听器才会被调用，这意味着第一次渲染Book组件时，通过route对象的监听器是得不到数据的，因此利用created钩子来获取第一次渲染时的数据，当然，也可以利用immediate选项，将其值设为true，让监听器在监听开始后立即执行，这样就不需要created钩子了。(2)$route对象的监听器函数中的to参数表示即将进入的目标路由对象，该函数还可以带一个from参数，表示当前导航正要离开的路有对象。除了监听$route对象，还可以用到后面要学习的导航守卫。这个以后再说。Vue-router路由分为两种：声明式路由编程式路由声明式导航是写在template标签里，通过标签来触发编程式导航写在js里，通过this.$router.push(xxx)来触发路径前面例子中通过在页面上设置【router-link】标签进行路由地址间的跳转，就等同于执行push方法。push方法会将一条心的路由记录添加到浏览器的history栈中，通过history的自身特性，驱使浏览器进行页面的跳转。同时，因为在history会话历史中会一直保留这个路由信息，所以当后退时还是可以返回到当前的页面。在push方法中，参数可以使一个字符串路径，或者是一个描述地址的对象。如果带参数的话，对象方式可以通过query属性来指定参数。需求：在登录页面中提供用户名和密码输入框以及【提交】按钮，点击【提交】按钮在注册页面中显示出用户名和密码信息。1.添加tmplogin模板2.定义组件对象3.在路由中进行配置replace方法同样可以实现路由跳转的目的。不过，从名字上也可以看出，与使用push方法跳转不同的是，当使用replace方法时，并不会往history栈中新增一条新的记录，而是会替换当前的记录，因此无法通过后退按钮返回被替换前的页面。需求：在账户页面下添加一个【替换路由】按钮，点击后跳转到新闻页面。1.tempaccount模板添加button按钮。2.在Account组件下，绑定对应方法。从【关于我们】到【账户】，点击按钮跳转，进入【新闻】，此时点击浏览器的后退，发现并不会回到【账户】，而是回到【关于我们】。当使用go方法时，可以在history记录中向前或向后跳转。也就是说，通过go方法可以在已经存储的history路由历史中前进后退。1.$router对象是全局路由的实例，是VueRouter构造方法的实例。是路由操作对象，可以添加或跳转路由，替换路由等。2.$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。在某些时候，生成的路由URL地址可能会很长，在使用中可能会显得有些不便。这个时候通过一个名称来标识路由会更方便一些。使用命名路由之后，在使用router-link的to属性跳转路由的时候传一个对象，跳转到指定的路由地址上。当打开一个页面时，整个页面可能是由多个Vue组件构成的。例如，一般后端管理首页可能是由sidebar（侧导航），header（顶部导航）和main（主内容）这三个Vue组件构成的。此时，通过Vue Router构建路由信息时，如果一个URL只能对应一个Vue组件，整个页面将无法正确显示。通过router-view标签，就可以指定组件渲染显示到什么位置。因此，当需要在一个页面上显示多个组件的时候，就需要在页面中添加多个router-view标签。那么，是不是可以通过一个路由对应多个组件，然后按需渲染到不同的【router-view】标签上呢？默认情况下不能，当我们将一个路由对象对应到多个组件时，不管有多少个【router-view】标签，程序都会将第一个组件渲染到所有的【router-view】标签上。那怎么办呢？需要实现的是一个路由信息可以通过设计者的需求去渲染到页面中指定的router-view标签，这可以通过Vue Router命名视图的方式来实现。命名视图与命名路由的实现方式相似。命名视图通过在【router-view】标签上设定name属性，然后再构建路由与组件的对应关系时，以一种【name：component】的形式构造出一个组件对象，从而指明在哪个【router-view】标签上加载什么组件。1.三个组件的样式布局2.html代码部分3.定义路由跳转的组件模板4.定义路由信息完整代码

相关推荐: go语言如何判断一个文件是否存在

这篇文章主要介绍“go语言如何判断一个文件是否存在”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“go语言如何判断一个文件是否存在”文章能帮助大家解决问题。 在go语言中，判断一个文件是否存在，需要使用到“os.Stat…