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跳到todocument.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 前端攻城狮