vue-router路由详解

• Angular的ngRouter

• React的ReactRouter

• Vue的vue-router

• 当然, 我们的重点是vue-router

• vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

• 我们可以访问其官方网站对其进行学习: https://router.vuejs.org/zh/

• vue-router是基于路由和组件的

• 路由用于设定访问路径, 将路径和组件映射起来.

• 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

安装和使用vue-router

• 如果已经学习了webpack, 对这里就会比较熟悉.以下我们主要是通过工程化的方式进行开发的.

• 安装

• npm安装vue-router

npm install vue-router --save

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

• 第一步：导入路由对象，并调用Vue.use（VueRouter）

import Vue from ‘vue’

import VueRouter from ‘vue-router’

Vue.use(VueRouter)

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

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

• 使用vue-router的步骤

• 第一步: 创建路由组件

• 第二步: 配置路由映射: 组件和路径映射关系

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

效果：

路由的默认路径

• 我们这里还有一个不太好的实现:

• 默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.

• 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.

• 如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?

• 非常简单, 我们只需要配置多配置一个映射就可以了.

• 配置解析:

• 我们在routes中又配置了一个映射.

• path配置的是根路径: /

• redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

History模式

• 上面说过改变路径的方式有两种:

• URL的hash

• HTML5的history

• 默认情况下, 路径的改变使用的URL的hash.

• 如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可:

router-link补充

• to：指定跳转的路径

• tag：指定router-link之后渲染成什么组件，如是渲染成 li 还是 a 标签

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

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

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

修改方式

路由代码跳转

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

比如, 我们将代码修改如下:

动态路由

路由懒加载

传送门

路由嵌套

概念

• 嵌套路由是一个很常见的功能

• 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.

• 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

• 路径和组件的关系如下:

简单实现

• 在主路由index.jx中导入模板对象并在路由对象中添加子路由（嵌套添加）通过添加children数组的形式添加子路由。同时可以设置默认子路由的显示

const routes = [

//一个对象就是一个映射关系

{

path: ‘/home’,//路径对应根/home

component: Home,

//添加嵌套子路由

children: [

{

path: ‘news’,//由于是子路由，不用再加斜杠/了，会自动加

component:HomeNews

},

{

path: ‘message’,//由于是子路由，不用再加斜杠/了

component:HomeMessage

},

//设置默认首页

{

path: ‘’,

redirect:‘/home/news’

}

]

},

{

path: ‘/about’,//路径对应根/about

component:About

},

{

path: ‘/user/:userid’,//路径对应根/user

component:User

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题