本文共 3555 字，大约阅读时间需要 11 分钟。

一,前言

昨天断更了一天,加上到家比较晚,今天周五,离吹出去的牛逼还有2天,目前还差25篇,囧所以...昨天还在考虑剩下的这些能不能凑上这25篇今天做好了vue-router的demo之后发现...,还真不用凑,25篇可能都说不完这正是解决了一个问题,又制造了另一个问题,那么现在的问题是....已经晚上11:15了废话不多说,路由这东西看似不起眼,要说的东西还真不少的这一篇先来介绍vue-router的安装和简单使用

---

二,vue-router简介

AngularJS有ngRouter和uiRouterReactJs有ReactRouterVue也有自己的路由插件:vue-router

Vue Router:

Vue.js官方路由管理器,和Vue.js核心深度集成,便于开发者构建单页面应用(SPA)

官网:

https://router.vuejs.org/zh/

---

三,准备工作

之前介绍vue-cli时,我们知道在初始化脚手架时,可以指定是否自动集成vue-router所以需要先创建一个没有集成vue-router的脚手架创建脚手架时询问是否使用eslint,选择否,eslint的使用后边单独介绍由于项目需要简单的UI样式,在脚手架项目根目录下引入bootstrap.css路径:static/css/bootstrap.css

修改index.html添加bootstrap.css引用:

---

四,vue-router的安装

有了未集成vue-router的Vue脚手架工程,就可以从零开始安装和使用了

控制台进入项目根目录,安装vue-router

npm install vue-router --save

---

五,vue-router的配置和简单使用

实现这样一个需求:

在一个页面上,通过路由实现两个组件的切换显示

为了便于理解,先贴一个完成的项目目录:

第一步:创建两个组件

组件分为路由组件和非路由组件通常情况下非路由组件存放在components文件夹中路由组件存放在views/pages文件夹中这里创建两个组件:首页模块和商品模块这两个组件属于路由组件,存放在pages文件夹由于脚手架中已有根据建,无需再创建根组件:脚手架自带的App.vue文件为默认根组件

Home.vue:

Product.vue:

第二步:将组件配置到路由进行映射

路由实际就是path和组件对象的映射关系由于这次要做路由的集成,所以从头开始说

1,创建src/router/index.js文件,用保存路由配置

2,在index.js中对路由器进行配置,将路由组件映射成为路由(首次集成配置较多)

/* *  路由器配置 */// vue-router依赖vue,先引入vueimport Vue from 'vue'// 声明使用vue-router插件import VueRouter from 'vue-router'// 引入路由组件import Product from '../pages/Product.vue'import Home from '../pages/Home.vue'// 触发插件install方法Vue.use(VueRouter)// 创建路由器实例export default new VueRouter ({  // 注册应用中所有的路由  routes: [    {      path: '/home',      component: Home,    },    {      path: '/product',      component: Product    },    {      path: '/',        //默认重定向到首页/home      redirect: '/home'    }  ]})

vue-router插件,对外暴露了一个路由器的构造函数,用来创建路由器,传入配置对象配置对象中配置路由routes-多个路由1)注意路由和路由器的两个概念,配置中主要实例化路由器对象,在路由器中配置路由Vue-router是vue插件,依赖vue,所以需要先引入vue,再引入vue-router2)使用Vue.use(VueRouter),触发插件install方法,完成install,这部分在Vue插件部分有过介绍(注意,大多数的插件都需要Vue.use才能使用,而axios并不需要,因为它没写install...)3)引入路由组件4)实例化VueRouter,在routes选项下注册路由,routes是一个数组对象,包含多个路由对象路由对象中有多种配置项,最简单的就是path路径和component组件对象的映射另外还做了默认重定向到首页的操作5)最后将VueRouter对象默认导出

3,在入口文件main.js中,配置路由器

上边在路由器中配置好了路由,那么路由配置到哪?路由配置到Vue中,在Vue实例化时,注入路由

import Vue from 'vue'import App from './App'// 引入入口文件:/router/index.jsimport router from './router'new Vue({  el: '#app',  router,// 等同于router: router  components: { App },  template: '
   '})

main.js是程序的入口文件,所以在这里进行Vue实例化路由器在Vue实例化时进行配置,所以需要引入路由配置(导出VueRouter对象给Vue使用)注意:虽然VueRouter是默认导出,外部可以所以命名,但当前这种引入方式必须命名为router因为router简写形式等同于router: router,这个key是不能变的,所以,如果想做其他命名就不要使用简写形式了

第三步:修改根组件,实现路由的切换显示

App.vue:

VueRouter为提供了两个标签:1)
   
    路由链接:    根据path找对应的路由组件,通过to设置跳转链接    API文档:        https://router.vuejs.org/zh/api/#router-link2)
    
     路由视图:    用于显示当前路由组件    API文档:        https://router.vuejs.org/zh/api/#router-view
    
   

---

六,测试工程

运行工程:

根目录下执行npm run dev 或 npm start

浏览器访问,默认重定向到

网上书城,默认显示首页,当点击商品切换路由组件显示:

这样就完成了路由最基本的使用

---

七,结尾

由于这一篇需要对路由进行安装配置等前期操作所以后续添加新的路由组件就没有这个复杂了只要在此基础上昨天加就可以一般来讲添加路由组件分为3个步骤:1,在views定义路由组件2,在router中映射成路由3,在调用组件中写跳转
   
    和显示
    
     在根目录添加了一个名为router-link-active的class
     
     
      链接激活时,默认被添加一个router-link-active的class通过对router-link-active写样式来置选中项的样式参照
      
       的API,也可用下面的方式指定class名:默认值可以通过路由的构造选项 linkActiveClass 来全局配置。