vue获取参数的几种方式总结_vue.js_

路由基础

1.SPA与路由

1.1 SPA介绍

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，不支持低版本的浏览器，最低只支持到IE9
• 4，初次加载时耗时多
• 5，页面复杂度提高很多

1.2 路由介绍

简单举例说明，假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：

http://10.0.0.1/ http://10.0.0.1/about http://10.0.0.1/concat

那么其路径就分别是 /，/about，/concat。

当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，然后会解析 URL 中的路径 /about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。

简单的说，路由是根据不同的 url 地址展示不同的内容或页面。

1.3前端路由原理

路由的概念在软件工程中出现，最早是在后端路由中实现的。服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。

前端路由是如何做到URL和内容进行映射呢？监听URL的改变。

1.3.1 URL的hash

URL的hash也就是锚点(#), 本质上是改变window.location的href属性；我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作。

homeabout

hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。

1.3.2 HTML5的History

14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。

通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。

为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面；

link1link2

2.vue-router基础用法

通过vue的路由可实现多视图的单页面Web应用。VueRouter文档

我们之前使用过is特性来实现动态组件，vue-router的实现原理与之类似。vue-router展示不同的页面事实上就是动态加载不同的组件。

当我们的地址栏发生了变化，vue-router就会监听到。根据它里面配置的匹配规则，展示不同的组件。

2.1 下载VueRouter

2.1.1 直接下载

VueRouter下载地址 : https://unpkg.com/vue-router/dist/vue-router.js 

2.1.2 使用CDN地址

2.1.3 脚手架

在使用脚手架搭建项目时，选择 Vue-router，项目创建好之后默认安装vue-router。如果创建项目时，没有选择，也可以使用模块化开发的方式。执行如下的命令来安装Vue Router。

npm i vue-router

2.2 一般使用过程

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.vue

2.2.4 定义路由，创建路由实例

src目录下新建一个router文件夹，如果创建项目时，已经选择了Vue-router则会自动创建。创建index.js文件，代码如下：

import Vue from 'vue' import VueRouter from 'vue-router' import Films from '@/components/About' import Cinemas from '@/components/News' // 注册路由插件, 两个全局 router-view router-link Vue.use(VueRouter) // 配置表,有多条路由时，通常定义为一个常量数组，里面每个对象就是一个路由 const routes = [ // 定义路由格式：path指定路由的url，component指定当单击path指定的url时显示哪个组件内容。 { path: '/about', component: About }, { path: '/news', component: News } ] //能new VueRouter就是因为引入了vue-router.js。 export default new VueRouter({ // routes:routes//左边routes为要设置的路由选项routes，右边routes为选项值，名字当然可以不同，但是一般设置为相同。第2步不单独定义，直接写在routes里也可以 routes, mode:'history', linkActiveClass:'active' }); 

2.2.5 挂载路由实例对象

在main的js中，挂在路由实例对象.

import router from './router' //创建vue根实例，并将上面的路由实例挂载到vue实例上，也称为注入路由，就是告诉vue实例有这么一个路由了。 //怎么告诉呢？通过router选项 var vm = new Vue({ el: "#app", // router:router//同样:左右两边名称相同，可以简写 router//注入路由 }) 

2.3 修改路由模式

上面的案例中，当我们切换路由时发现地址栏后面会自动再加一个“#”。为什么是这种显示模式呢？因为在使用Vue Router创建路由实例时，默认采用的是hash路由配置模式。这种模式的优点是各种浏览器的兼容性比较好。

但是hash模式下url需要带“#”符号，不仅看起来不舒服，而且有些场景下是会破坏路由中的"#"（微信分享页面就会把"#"后边的内容处理掉），所以我们可以将路由实例修改为history路由模式。只需要在创建路由实例时，设置mode选项为history即可。 

const router = new VueRouter
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：VUE中的自定义指令钩子函数讲解_vue.js_
                                                                
下一篇：JavaScript 异步函数 Promisification 处理详情_javascript技巧_