Vue-Router

1.不同的内网中可能有一样的内网IP地址，但公网IP地址是唯一的。

2.路由器的路由机制决定数据包从来源到目的地的路径；路由器的转送机制将输入端的数据转移到合适的输出端。路由表本质是一个映射表，决定了数据包的指向，一个内网IP对应一个电脑的mac标识。

3.什么是后端渲染？

早期由jsp（java server page，用java写网页，然后传到浏览器，由浏览器展示网页，ps:本科的时候有时做系统的时候会这么做）或php开发网页。对于jsp（html+css+java），其包含的一些java代码的作用是从数据库中读取数据，并且将其动态地渲染到页面中，最后将最终的网页传给浏览器的时候网页中只有html+css，即服务器直接生产并渲染好对应的HTML页面，返回给客户端进行展示。因为是在后端（通过特殊的技术，如jsp或php）渲染网页，而不是在前端渲染网页的，所以这就是后端渲染。

4.什么是后端路由？

后端处理URL和页面之间的映射关系。

服务器处理多个页面时，一个页面会有自己对应的网址（URL）；URL会发送到服务器，后者通过正则对该URL进行匹配，并且最后交给一个Controller进行处理；Controller进行各种处理，最终生成HTML或者数据，返回给前端。

当页面中需要请求不同的路径内容时，交给服务器进行处理，服务器渲染好整个页面，并且将页面返回给客户端，这种页面不需要单独加载任何js和css，可以直接交给浏览器展示，这样有利于SEO的优化。

后端路由的缺点：

一种情况是整个页面的模块由后端人员来编写和维护的
另一种情况是前端开发人员如果要开发页面，需要通过PHP和java等语言来编写页面代码
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起，编写和维护都很糟糕

5.前后端分离阶段;

由浏览器、静态资源服务器、提供API接口的服务器（连接数据库）组成，当浏览器请求一个url时，会先向静态资源服务器请求对应页面的html+css+js，然后浏览器从提供API接口的服务器中获取数据，由前端的js代码渲染获得的数据。

后端只负责提供数据，不负责任何界面相关的内容。

随着ajax的出现，出现了前后端分离的开发模式。
后端只提供API来返回数据，前端通过ajax获取数据，并且可以通过javascript将数据渲染到页面中。
该模式最大的有点是前后端逻辑分离清楚，后端专注于数据上，前端专注于交互和可视化上。
并且当移动端（IOS/Android）出现后，后端不需要进行任何处理，依然使用之前的一套API即可。
目前很多网站仍是这种开发模式（ps：本科也用过这种模式做项目）。

6.什么是前端渲染？

浏览器中现实的网页中的大部分内容，都是由前端从API服务器中请求到数据，然后编写的js代码在浏览器中执行，最终渲染出来的网页。

7.单页面富应用阶段（SPA）：SPA最主要的特点是在前后端分离的基础上加了一层前端路由。也就是前端来维护一套路由规则。

在前后端分离阶段中，页面中有几套html+css+js，分别对应不同的url请求的页面。但在单页面富应用阶段中，整个网页只有一个index.html+css+js。

浏览器请求url对应的页面时，会首先从静态资源服务器中拉取唯一的index.html+css+js，然后通过前端路由的映射关系渲染js中对应的组件（vue中）到页面上。

8.前端路由的核心：改变url，但页面不进行整体的刷新，改变路径的方式有两种：URL的hash、HTML5的history。

9.URL的hash就是描点（#），其本质上是改变windows.location的href属性，可以通过直接赋值location.hash来改变href，但页面不发生刷新（不会再向服务器请求资源），浏览器会向前端路由请求按照当前url应该渲染哪个组件。

10.可以通过HTML5的history对象的pushState方法修改url，页面也不会刷新。如history.pushState({},'','home')，类似于栈的存储结构，history.back()会返回到之前的url，可以点击浏览器界面左上角的标志前进后退。history.replaceState({},'','home')虽然那可以修改url，但不能返回到之前的页面。

11.HTML5的history模式中，history.back()等价于history.go(-1)，history.forward()等价于history.go(1)，这三个接口相当于浏览器界面的前进后退。但使用的前提是调用过方法history.pushState()。

12.Angular、React和Vue都有自己的路由实现。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，详情见官网。

13.vue-router是基于路由和组件的，路由用于设定访问路径，将路径和组件映射起来，在vue-router的单页面应用中，页面的路径的改变就是组件的切换。

步骤一：安装vue-router

npm install vue-router --save

步骤二：在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能），在src路径下创建router文件夹，其中放置路由相关的信息。

在src/router文件夹下的index.js文件中导入路由对象（VueRouter），并且调用Vue.use(VueRouter)
创建路由实例，并且传入路由映射配置routes（一个数组）
在src/main.js中的Vue实例中挂载创建的路由实例

14.如果import…from ‘文件夹’，vue会自动找到该文件夹下的index.js文件，所以如果要导入某个文件夹下的index.js文件，可以直接导入文件夹。

15.使用vue-router的步骤：

创建路由组件
配置路由映射：组件和路径映射关系
使用路由：通过<router-link>和<router-view>

16.<router-link>标签是一个vue-router中已经内置的组件，它会被渲染成一个<a>标签，其中的to属性相当于<a>标签的href属性。

17.<router-view>标签会根据当前路径，动态渲染出不同的组件。路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变。

18.注意路由的默认路径修改，配置如下：

const routes = [{path: '',// redirect重定向路径''为'/home'redirect: '/home',},{path: '/home',component: Home},{path: '/about',component: About}
]

默认情况下，vue-router默认通过改变URL的hash来改变路径，从而保证页面不会刷新，因此路径会有#，但下面设置为HTML5的history模式的话，路径中就不再有#，并且默认情况下使用的是history.pushState模式将href压栈，浏览器左上角可以点击前进后退到达之前或之后的页面。

const router = new VueRouter({// 配置路由和组件之间的应用关系// routes: routesroutes,mode: 'history'
});

19.<router-link>标签的to属性指定跳转的路径，tag属性可以指定<router-link>之后渲染成什么组件，tag="button"会将标签<router-link>从<a>元素渲染成一个按钮元素。

20.如果在vue-router使用的是HTML5的history模式时，如果不希望用户浏览器左上角点击前进后退到达之前或之后的页面，在<router-link>中添加属性replace（不需要后面跟着某个值），就能将history.pushState模式转换成history.replace模式，在该模式下不会留下history记录，后退键返回不能返回到上一个页面中。

21.当<router-link>对应的路由匹配成功时（点击其对应组件渲染得到的<a>标签或者button标签或其他元素时，或者当前已经指定显示默认组件时），会自动给当前元素设置class属性的值为router-link-active（这样就可以通过class值修改其对应的css样式），设置<router-link>标签对应的active-class属性可以修改默认的class属性对应的值：router-link-active，在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类；但通常不会修改类的属性（将router-link-active改变为active或其他），直接使用默认的router-link-active即可。

如果想要统一修改被点击的元素的class的值router-link-active改为active或其他，需要在router的配置文件index.js中修改如下：

const router = new VueRouter({// 配置路由和组件之间的应用关系// routes: routesroutes,mode: 'history',linkActiveClass: 'active'
});

添加linkActiveClass属性即可。

22.<router-link>标签被点击后还会添加一个名为exact-active-class的class，它类似于active-class，只是在精准匹配下才会出现的class，和嵌套路由有关。

23.如果配置了vue-router，如果想通过代码（为元素添加监听事件）的方式修改路由，最好不要绕过vue-router修改路径，即在js代码中添加这种代码：history.pushState({}, '', 'home')

methods: {homeClick() {// 通过代码的方式修改路由 vue-router// push => pushState// this对应的是当前组件，vue-router为每个组件都添加了$router属性// $router就是index.js中导出的VueRouter对象this.$router.push("/home");// history.pushState({}, "", "/home"); // 不可取console.log("homeClick");},aboutClick() {this.$router.push("/about");console.log("aboutClick");},},

24.在某些情况下，一个页面的path路径可能是不确定的，比如进入用户界面时，希望是该路径：/usr/aaaa或/usr/bbbb，除了有前面的/usr以外，后面还跟上了用户的ID，这种path和Component的匹配关系，称之为动态路由（也是路由传递数据的一种方式）

25.组件的$route属性（this.route）会得到当前活跃的路由（index.js中routes中的某个对象），‘this.route）会得到当前活跃的路由（index.js中routes中的某个对象），`this.route）会得到当前活跃的路由（index.js中routes中的某个对象），‘this.route.params`得到当前活跃路由的参数。

{path: '/user/:abc', // :abc用于动态绑定用户idcomponent: User}

上下对应，index.js中的：abc会被赋值为App.vue中userId变量的值：

<router-link :to="'/user/'+userId">用户</router-link>

在User.vue中通过代码this.$route.params.abc获取当前活跃的路由的参数中动态赋予的变量abc。

26.打包后文件夹如图，app开头的js文件中是当前应用程序开发的所有代码（业务代码，即自己敲的），manifest开头的js文件中的代码是为打包的代码做底层支撑，vender开头的js文件中包括了第三方的代码（vue/vue-router/axios等）。

问：.js.map为后缀的文件是什么？

答：Vue项目打包后，代码会经过压缩混淆，static文件夹下的css和js文件对应生成了.js.map后缀的文件。这种文件可以在调试代码时准确指出哪一行哪一列的报错信息，方便开发人员调试bug，但在项目上线打包的时候要从源头上控制不让生成map文件。

解决办法：到config/index.js中改配置：productionSourceMap 为false而不是true，否则在最终打包的文件static文件夹中会出现一些map文件。

27.打包之后的代码会被丑化，如果想去掉丑化的效果，只需要在build文件夹下的webpack.prod.config.js中将new UglifyJsPlugin相关的配置注释掉。

28.打包构建应用时，javascript包会很大，影响页面加载，如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，开发就会更高效。

在开发时一般是一个路由打包一个js文件，而且该js文件默认情况下不会跟着所有的内容一起被请求到浏览器，而是请求该js文件对应的页面+底层支撑的代码+第三方代码+其他需要的api等，也就是路由懒加载，将不同的路由对应的组件打包到不同的js文件中，只有在访问某个路由时才加载对应的组件。

29.路由懒加载的方式：

结合Vue的异步组件和Webpack的代码分割，非常古老的示例代码：

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

AMD写法，示例代码：

const About = resolve => require(['../components/About.vue'], resolve);

在ES6中有更简单的写法来组织Vue异步组件和Webpack的代码分割，示例代码：
```
const Home = () => import('../components/Home.vue')
```

30.嵌套路由是什么？

比如在home页面中，我们希望通过/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

实现嵌套路由的两个步骤：

创建对应的子组件，并且在路由映射中配置对应的子路由
在组件内部使用<router-view>标签

嵌套路由也可以配置默认路径：

{path: '',redirect: 'news'
}

31.跳转路由的时候如果希望传递参数，会有两种方式：params和query，如果要传递大量的参数，就用query方式传递参数。

params的类型：

配置路由格式：/router/:id
传递的方式：在<router-link>的to属性的path值后面拼接上对应的动态的值
传递后形成的路径： /router/123，/router/abc
拿到赋值后第一步中:id的值：$route.params.id

query的类型：

配置路由格式：/router，即普通配置
传递的方式：传递一个对象，其中使用query的key作为传递方式：<router-link :to="{path: '/profile', query: {name: 'erin', age: 20}}">档案</router-link>
传递后形成的路径：/router?name=erin&age=20
在对应的vue中获得query的key：<h2>{{$route.query.name}}</h2>

32.URL的组成：scheme（http/https/tcp等）

Vue学习笔记（五）相关推荐

好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
vue学习笔记(五)：对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
Vue 学习第五天学习笔记
Vue 学习第五天 1. keyup事件 <div id="app"> <input type="text" v-model=" ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue学习笔记（二）组件化和模块化
Vue学习笔记(二)组件化和模块化前言组件化什么是组件化 1.基础使用 2.全局组件和局部组件 3.语法糖和模板抽离 4.组件的data为什么是函数 5.父子组件 5.1 父子组件 5.2 父子 ...

Vue学习笔记（五）

Vue-Router

Vue学习笔记（五）相关推荐

最新文章

热门文章