Vue2.0 梳理系列 | Vue-Router

Vue 相关知识梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

从1989年 Tim 发明了超文本标记语言 HTML 开始，前端的发展就此开始了。从开始的静态网页，再到 ASP、JSP 和 PHP 等创建动态 HTML 方式的诞生，之后是 JavaScript的加入，JavaScript 操作 HTML，JQuery 的诞生。从 MVC 模式演变到 MVVM框架模式等等，前端在悄无声息间茁壮成长。

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed。2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。2014.01.24，Vue 正式对外发布，版本号是 0.8.0。

2015.10.26，vue-router、vuex、vue-cli 相继发布，标志着 Vue 从一个视图层库发展为一个渐进式框架。2016.10.01，Vue 2.0 发布，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

本系列旨在梳理 Vue 2.0 相关知识，接下来让我们一起Vue的旅途吧！

---

安装 Vue-Router

在模块化工程中使用它(因为是一个插件，所以可以通过 Vue.use() 来安装路由功能)

第一步：导入路由对象，并且调用 Vue.use(VueRouter)。

第二步：创建路由实例，并且传入路由映射配置。

第三步：在Vue实例中挂载创建的路由实例。

（1）导入路由对象

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter)

（2）创建路由实例  index.js

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'
//1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
//2.创建VueRounter对象，定义路由
const routes = [ 
    //映射关系
    {            
      path: '/home',
      component: Home
    },
    {
      path:'/about',
      component: About
    }
]
//3.创建router实例
const router = new VueRouter({
    //配置路由和组件之间的应用关系
    routes  //增强写法
})
//4.将router对象导出到Vue实例
export default router

（3）挂载到Vue实例中main.js

import Vue from 'vue' 
import VueRouter from './App' 
import router from './router'
//挂载
new Vue({  
    el: '#app',
    router,
    render: h=> h(App)
})

---

vue-router的使用

第一步：创建路由组件about.vue

<template>
  <div>
    <h2>关于标题</h2>
    <h2>这是关于标题的内容</h2>
  </div>
</template>
<script>
  export default{
    name: "about"
  }
</script>

home.vue

<template>
  <div>
    <h2>首页标题</h2>
    <h2>这是首页的内容</h2>
  </div>
</template>
<script>
export default{
  name: "home"
}
</script>

第二步: 配置路由映射：组件和路径映射关系index.js

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import router from '../components/home'
import router from '../components/about'
//1.注入插件
Vue.use(VueRouter)
//2.定义路由
const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
//3.创建router实例
const router = new VueRouter({})
//4.将router对象导出到Vue实例
export default router

第三步: 通过<router-link>和<router-view>使用路由

App.vue

<template>
  <div id="app">
    <h2>网站标题</h2>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default{
  name: "about"
}
</script>

---

<rounter-link>显示标签

• to 属性用于指定跳转的路径。

• tag 属性可以指定<router-link>之后渲染成什么组件。

• replace后退键返回不能返回上一个界面。

• active-class当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 可以修改默认的名称。

• 该class具体的名称也可以通过router实例的属性进行修改 。

---

<rounter-view>根据路径渲染出不同的组件。

• 路由默认路径

//路由的默认路径，进入网站首页默认显示组件
const routes = [
   {
     path:'/', //path配置的是根路径: /
     redirect:'/home' //redirect是重定向，将根路径重定向到/home的路径
   }
 ]

• HTML5的History模式

const router  =new VueRouter({
    //配置路由和组件之间的应用关系
    routes,
    mode: 'history'   //网址hash改成history模式 没有#
})

• 通过代码跳转路由

<template>
  <div id="app">
    <h2>
      网站标题
    </h2>
    <button @click="linkToHome">
      首页
     </button>
    <button @click="linkToAbout">
      关于
    </button>
    <router-view></router-view>
  </div>
</template>
<script>
export default{
  name: "App",
  methods: {
      linkToHome(){
        //通过代码的方式修改路由
        this.$rounter.push('/home')
        //this.$rounter.replace('/home') 后退键返回不能返回上一个界面
      },
      linkToAbout(){
         this.$rounter.push('/about')
      }
   },
}
</script>

---

动态路由

在某些情况下，一个页面的 path 路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaa 除了有前面的 /user 之外，后面还跟上了用户的ID这种path 和 Component 的匹配关系，称之为动态路由。

• index.js

const routes = [  
  {    
    path:'/user:userId',    //动态路由    
    component:User  
  } 
]

• 跳转App.vue

<template>
  <div>
    //动态绑定，''表示一个字符串
    <router-link :to="'/User/'+userId">
      用户
    </router-link> 
  </div>
</template>
<script>
export default {
   name: 'App',
   data() {
     return {
        userId:'lisi'
     }
   },
   methods: {
     homeClick(){
       this.$router.replace('/home')
     }
   }
}
</script>

• User.vue

<script>
  export default{
      name: "User",
      computed: {
         userId(){
               //  $route 指当前活跃的路由动态路由
              return this.$route.params.userId
           }
      }
  }
</script>

---

路由的懒加载

将路由对应的组件打包成一个个的js代码块，避免影响页面加载。只有在这个路由被访问到的时候, 才加载对应的组件。

ES6中懒加载方式

const Home = () => import('../components/Home.vue')

---

路由的嵌套使用

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

• 创建对应的子组件，并且在路由映射中配置对应的子路由。

• 在组件内部使用<router-view>标签。

const routes = [
    {
      children: [ //路由的嵌套使用
          {
            path: '',
            redirect: 'news'  //默认显示news新闻
          }
      ],
      path: '/home',
      component: Home
    }
 ]

---

vue-router 参数传递

params的类型：

• 配置路由格式 :/router/:id

path:'/user:userId'

• 传递的方式：在path后面跟上对应的值

• 传递后形成的路径：/router/123, /router/abc

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

<h2>{{$route.params.id}}</h2> //取值id

query的类型:

• 配置路由格式：/router，也就是普通配置

• 传递的方式：对象中使用query的key作为传递方式

• 传递后形成的路径：/router?id=123, /router?id=abc

//向profile传数据
<rounter-link 
  :to="{path: '/profile',
  query:{name:'aa',age:'21',height:1.80}}"
>
  档案
</rounter-link>

---

button传递参数

<template>
    <div>
        <button @click="userClick">
          用户
        </button>
        <button @click="profileClick">
          档案
        </button>
    </div>
</template>
<script>
export default{
    name: "App",
    data(){
        return {
          userId: 'zhangsan'
        }
    },
    methods: {
         userClick(){
            this.$router.push('/user' + this.userId)
         },
         profileClick(){ 
            this.$router.push({
                 path: '/profile',
                 age: 22
             })
         }
     }
 }
</script>

---

$route 和 $router的区别

• $router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法。

• $route 为当前 router 跳转对象里面可以获取 name、path、query、params 等处于活跃的路由。

//生命周期
created(){ //创建组件后回调
  console.log('created');
},
mounted(){ //挂载后回调
  console.log('mounted');
},
updated(){ //界面刷新后回调
  console.log('updated');
}

---

导航守卫

vue-router 提供的导航守卫主要用来监听路由的进入和离开的。vue-router 提供了 beforeEach 和 afterEach 的钩子函数，它们会在路由即将改变前和改变后触发。

（1）导航钩子的三个参数：

• to 即将要进入的目标的路由对象。

• from 当前导航即将要离开的路由对象。

• next 调用该方法后，才能进入下一个钩子。

（2）meta 元数据（描述数据的数据）

如果是后置钩子，也就是afterEach，不需要主动调用next()函数。

（3）全局守卫

const routes = [
  {
    path: '/home',
    component: Home,
    children: [],
    meta: {
      title: '首页'
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    }
  },
  {
    path: '/',
    redirect: '/home'
  }
]
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
 })
//前置钩子 hook 回调  （前置守位guard）
router.beforeEach((to, from, next) => {
  //从from跳到to
  document.title = 'to.matched[0].meta.title'//meta里定义title  取数组matched里的第一个
  next() //必须调用next，执行下一步
})


//后置钩子(hook)
router.afterEach((to, from) =>{
  console.log('....');   
}


export default router

---

keep-alive 

是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

它有两个非常重要的属性：

• include - 字符串或正则表达，只有匹配的组件会被缓存。

• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存。

---

router-view 

也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存。

---

Vue 相关知识梳理系列文章将在本号持续发布，一起查漏补缺学个痛快！若您有遇到其它相关问题，非常欢迎在评论中留言讨论，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

葛媛

HFun 前端攻城狮