vue-router那些事

伴随着前端各种框架的出现，SPA（single page web application）应用势不可挡，伴随着的就是前端路由了

SPA最主要的特点就是在前后端分离的基础上加了一层前端路由

前端路由的核心

改变URL， 但是页面不进行整体的刷新。那问题就来了，我该怎么做？

1. URL的hash

URL的hash也就是锚点（#），本质上是改变window.location的href属性。

我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新

2. HTML5的history模式：pushState

   history接口是HTML5新增的， 他有5种模式改变URL而不刷新页面

   • history.pushState()

     

   • history.replaceState()

     

   • history.back() | history.forward() | history.go()

     

     • history.back() 等价于 history.go(-1)
     • history.forward() 等价于 history.go(1)

   在讲解vue中使用vue-router改变URL不刷新页面之前，先看一下

vue-router的使用

1. 安装vue-router

npm install vue-router --save

2. 在模块化工程中使用它（因为是一个插件，所以通过Vue.use()来挂载插件并使用）
   1. 导入路由对象，并且调用Vue.use(VueRouter)
   2. 创建路由实例，并且传入路由映射配置
   3. 在Vue实例中挂载创建的路由实例
3. 使用vue-router的步骤
   1. 创建路由组件
   2. 配置路由映射：组件和路径映射关系
   3. 使用路由：通过 <router-link>和<router-view>

• <router-link>该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签
• <router-view>该标签会根据当前的路径，动态渲染出不同的组件
• 在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

4. 路由的默认路径

默认情况下，进入网站的首页，我们希望<router-view>渲染首页的内容。但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以

• 我们只需要多配置一个路由映射关系就可以了


• path配置的是根路径 /
• redirect是重定向，也就是我们将根据路径重定向到/home的路径下

5. HTML5的history模式

• 前面说过改变路径的方式有两种
  • URL的hash
  • HTML5的history
  • 默认情况下，路径的改变使用的URL的hash
• 如果希望使用HTML5的history模式，配置如下：

router-link补充

前面的<router-link>中，我们只是使用了一个属性to，用于指定跳转的路径

<router-link>还有一些其他属性：

• tag：tag可以指定<router-link>之后渲染成什么组件，比如<router-link to='/home' tag='li'>会渲染成一个<li>元素，而不是<a>
• replace：replace不是留下history记录，所以指定replace的情况下，后退键返回到上一个页面中
• active-class：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称

  • 在进行高亮显示的导航菜单或者底部tabbar时，会使用该类

  • 但是通常不会修改类的属性，会直接使用默认的router-link-active即可

  • 修改linkActiveClass，可以通过router实例的属性进行修改

路由代码跳转

有时候，页面的跳转可能需要执行对应的JavaScript代码，这个时候，就可以使用第二种跳转方式了

代码修改如下图

动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是这样的路径/user/aaa或、user/mmm

这种path和Component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）

• 路由代码

  {
    path: '/user/:id',
    component: User
  }

• 组件代码

<template>
  <div>
    <h2>我是用户页面</h2>
    <p>用户页面有下面这些信息,通过params传过来的</p>
    <h4>{{$route.params.id}}</h4>
  </div>
</template>

• 父组件代码

<router-link :to="'/user/' + id">用户</router-link>
或者
<router-link to="/user/zhangsan">用户</router-link>

• 效果图

  

路由的懒加载

• 路由的懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
• 只有在这个路由被访问到的时候，才加载对应的组件

如图：没有使用懒加载，最终编译的文件只有四个（使用vue4.0）

如图：使用了路由懒加载，每个路由文件都会单独编译成一个文件

• 懒加载的方式

  • 方式一：结合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')
  

嵌套路由

注意点：

• 配置嵌套路由的映射关系时，path不需要添加/
• 路由跳转时，需要填写完整的路由映射；如home下面有个news嵌套路由，代码<router-link to="/home/news"></router-link>

  // 路由配置
	{
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        redirect: 'message'
      },
      {
        path: 'message',
        component: Message
      },
      {
        path: 'news',
        component: News
      }
    ]
  }

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页的内容</p>
    <router-link to="/home/message">未读消息</router-link>
    <router-link to="/home/news">整点新闻</router-link>

    <router-view></router-view>
  </div>
</template>

传递参数的方式

• 传递参数主要有两种类型：params和query

• params的类型

  • 配置路由格式：/router/:id
  • 传递的方式：在path后面跟上对应的值
  • 传递后形成的路径：/router/123ab

• query的类型

  • 配置路由格式：/router，也就是普通配置
  • 传递的方式：对象中使用query的key作为传递方式
  • 传递后形成的路径：/router?id=123&age=23

• 方式一：<router-link>

<router-link :to="{ path: '/profile', query: { name: 'chaos', age: 11, hobby: 'music' } }">档案</router-link>

• 方式二：js代码

    toProfile() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'chaos',
          age: 11,
          hobby: 'girl'
        }
      })
    }

• 获取参数

<template>
  <div>
    <h2>我是档案页面,我会将传递过来的参数展示到下面</h2>
    <p>这是通过params传递过来的参数{{$route.params}}</p>
    <p>这是通过query传递过来的参数{{$route.query}}</p>
  </div>
</template>

$router和$route的区别

• $router是VueRouter的实例，想要导航到不同的URL，则使用$router -- 路由的调度者
• $route为当前router跳转对象，路由本身；可以获取name、path、query、params等

导航守卫

• vue-router提供的导航守卫主要用来监听路由的进入和离开的

• vue-router提供了beforeEach和afterEach的钩子函数，他们会在路由即将改变前和改变后触发

• 我们可以利用beforeEach来完成标题的修改

  • 首先，我们可以在路由映射中定义一些标题，可以利用meta来定义
  • 其次，利用导航守卫，修改标题

    {
      path: '/home',
      component: Home,
      meta: {
        title: '首页'
      },
      children: [
        {
          path: '',
          redirect: 'message'
        },
        {
          path: 'message',
          component: Message
        },
        {
          path: 'news',
          component: News
        }
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于'
      }
    },
  

  router.beforeEach((to, from, next) => {
    console.log(to)
    document.title = to.matched[0].meta.title
    next()
  })
  

• 导航钩子的三个参数解析

  • to：即将要进入的目标的路由对象
  • from：当前导航即将要离开的路由对象
  • next：调用该方法后，才能进入下一个钩子

keep-alive

• keep-alive是vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。有两个非常重要的属性（属性里面不要随便加空格，造成匹配错误）
  • include - 字符串或正则表达式，只有匹配的组件才会被缓存
  • exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
• router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的试图组件都会被缓存