Vue学习笔记（五）

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: routes
  routes,
  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: routes
  routes,
  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.params`得到当前活跃路由的参数。

{
    path: '/user/:abc', // :abc用于动态绑定用户id
    component: 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等）😕/host（localhost等）:port（8080等）/path?query#fragment(片段，即hash)

33.所有的组件对象都继承自Vue的原型。

34.Vue实例暴露的一些实例属性与方法都有前缀$，以便与用户定义的属性和方法区分开来。

35.$router是VueRouter实例，如果想导航到不同的URL，则使用$router.push方法；$route为当前router跳转对象里面可以获取name、path等。

36.为什么使用导航守卫？用于监听从哪个路由跳转到哪个路由。

问：在一个SPA应用中如何改变网页的标题？

答：因为只有一个页面，所以跳转路由的时候只会更新组件，但标题不会改变。可以通过js代码来修改<title>标签的内容：document.title='新标题'

问：在Vue项目中应该在哪里修改？什么时候修改比较合适？

答：普通方法：在每个路由对应的组件.vue文件中，通过created或者mounted等生命周期函数执行代码进行修改，但页面较多时，该方法不易于维护，建议使用导航守卫的方法。vue-router提供的导航守卫主要用于监听路由的进入和离开，vue-router提供了beforeEach和afterEach这两个钩子函数，他们会在路由即将改变前和改变后被触发。

用导航守卫的方法修改标题：在src/router/index.js中为每个路由route添加meta属性：

{
    path: '/profile',
    component: Profile,
    meta: { // 元数据，即描述数据的数据
      title: '档案'
    }
  }

调用router.beforeEach（前置守卫），动态改变每个路由对应页面的标题。导航钩子函数beforeEach的三个参数解析：to是即将要进入的目标的路由对象，from是当前导航即将要离开的路由对象，此外必须调用next方法后才能进入下一个钩子。

// to和from参数都是route对象，即routes数组中的某个路由
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  // document.title = to.meta.title;
  // 如果按照上述配置，则默认展示的/home/news页面的title会是undefined（因为是嵌套路由），应该按照下面的方式配置
  document.title = to.matched[0].meta.title;
  next(); // 必须调用该函数
})

37.后置守卫（router.afterEach）不需要主动调用next()函数。前置守卫（router.beforeEach）和后置守卫（router.afterEach）都是全局导航守卫，除此之外还有路由独享的守卫、组件内的守卫。

38.keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，router-view是vue-router内置的一个全局组件，如果直接被包在keep-alive中，所有路径匹配到的视图组件都会被缓存，只会创建一次且不会被销毁。

39.如果在组件中定义了activated和deactivated生命周期函数，只有该组件在使用的时候被<keep-alive>包裹时，前面两个函数才可以被使用。

40.在嵌套路由的情况下，如果想要返回到离开该嵌套路由（如：/home）时最后访问的子路由（如：/home/message）或者嵌套路由（如：/home），而不是在index.js中配置的默认缺省的子路由（如：/home/news），可以在嵌套路由对应的.vue（如：Home.vue）中使用path属性记录路由离开时的路径，并且在beforeRouteLeave (to, from, next) {}中记录:

// 组件内导航:导航离开该组件的对应路由时调用，可以访问组件实例`this`
    beforeRouteLeave (to, from, next) {
      this.path = this.$route.path;
      next();
    },

该组件被<keep-alive>包裹时且处于活跃状态时，将记录了上一次路由离开时路径的this.path压栈到this.$router中，实现跳转到上一次路由离开时的子路由（/home/message）或者嵌套路由（/home）

activated() { // 界面处于活跃状态时会调用该生命周期函数
      // console.log("activated");
      this.$router.push(this.path);
    },

41.<keep-alive>有两个属性：include——字符串或正则表达式，只有匹配的组件会被缓存；exclude——字符串或正则表达式，任何匹配到的组件（匹配组件export对象中的name属性）不会被缓存，会每次访问或离开时创建或者销毁对应组件，示例代码：

<keep-alive exclude="Profile,User">
      <router-view/>
    </keep-alive>

42.TabBar实现思路（ps：安卓开发似曾相识）：

• 如果在下方有一个单独的TabBar组件，需要自定义该组件、在App中使用，并且将TabBar置于底部、设置相关样式
• TabBar中显示的内容由外界决定：定义插槽、flex布局平分TabBar
• 自定义TabBarItem，可以传入图片和文字：自定义TabBarItem，并且定义两个插槽：图片和文字；给两个插槽外层包装div，用于设置样式；填充插槽，实现底部TabBar的效果。
• 传入高亮图片：定义另一个插槽，插入active-icon的数据；定义一个变量isActive，通过v-show来决定是否显示对应的icon
• TabBarItem绑定路由数据：安装路由npm install vue-router --save；完成router/index.js的内容，以及创建对应的组件；main.js中注册router；App中加入<router-view>组件
• 点击item跳转到对应路由，并且动态决定isActive：监听item的点击，通过this.$router.replace()替换路由路径；通过this.$route.path.indexOf(this.link) !== -1来判断是否时active
• 动态计算active样式：封装新的计算属性——this.isActive ? ('color': 'red'):{}

43.在<style>中引用css资源时如下，对于id=tab-bar的元素，其中的子元素有class="tab-bar-item"，为其设置flex为1，可以让每个子元素在整体tab-bar元素中的布局是均分的，tabbar高度一般都是49px：

<style>
  @import "./assets/css/base.css";

  #tab-bar {
    display: flex;
  }

  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
  }
</style>

在js文件中引用css资源如下：

require('./assets/css/base.css')

44.flex布局是常用的css3布局方式，flex布局教程

45.在css中x和y轴分别从界面左上角向右、向下，css中的box-shadow: 10px 10px 10px rgba()，其中第一个10px是阴影在x轴方向上的偏移量，第二个是在y轴方向上的偏移量，第三个是模糊程度，第四个是颜色的透明度。

46.默认情况下文字是行内标签，<img>标签是行内替换元素（效果等于块元素）。

47.参考博客理解一下vertical-align，用于设置图片垂直居中。margin-top设置当前元素的上边距离上一个元素或者边界的距离。

48.如果想在某个组件中动态地插入内容，应该使用插槽<slot>

49.共用的组件可以放在components文件夹中，业务逻辑有关的可以放到另外的文件夹中集中管理。

50.在vue cli2中的build/webpack.base.conf.js中resolve.alias中可以设置别名，如：'@': resolve('src'), 'assets': resolve('src/assets')，这样在js代码中import组件时可以用别名，在html DOM中需要在别名前加上符号~，如~assets/img/home.svg等。