Vue核心技术-36,vue-router-路由的安装配置和简单使用

最新推荐文章于 2024-07-05 15:05:21 发布

BraveWangDev

最新推荐文章于 2024-07-05 15:05:21 发布

阅读量783

点赞数 2

分类专栏：【完结】Vue2 核心技术文章标签： Vue vue-router 配置使用

本文链接：https://blog.csdn.net/ABAP_Brave/article/details/81983762

版权

Vue 同时被 2 个专栏收录

68 篇文章 2 订阅

订阅专栏

【完结】Vue2 核心技术

60 篇文章 19 订阅

订阅专栏

一,前言

昨天断更了一天,加上到家比较晚,今天周五,离吹出去的牛逼还有2天,目前还差25篇,囧
所以...昨天还在考虑剩下的这些能不能凑上这25篇
今天做好了vue-router的demo之后发现...,还真不用凑,25篇可能都说不完
这正是解决了一个问题,又制造了另一个问题,那么现在的问题是....已经晚上11:15了

废话不多说,路由这东西看似不起眼,要说的东西还真不少的
这一篇先来介绍vue-router的安装和简单使用

二,vue-router简介

AngularJS有ngRouter和uiRouter
ReactJs有ReactRouter
Vue也有自己的路由插件: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引用:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!--引入bootstrap-->
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <title>vue-router</title>
    <style>
      .router-link-active {
        color: red !important;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

四,vue-router的安装

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

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

npm install vue-router --save

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

实现这样一个需求:

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

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

第一步:创建两个组件

组件分为路由组件和非路由组件
通常情况下非路由组件存放在components文件夹中
路由组件存放在views/pages文件夹中

这里创建两个组件:首页模块和商品模块
这两个组件属于路由组件,存放在pages文件夹

由于脚手架中已有根据建,无需再创建
根组件:脚手架自带的App.vue文件为默认根组件

Home.vue:

<template>
  <div>
    <h2>首页</h2>
  </div>
</template>

<script>

</script>

<style>

</style>

Product.vue:

<template>
  <div>
    <h2>首页</h2>
  </div>
</template>

<script>

</script>

<style>

</style>

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

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

1,创建src/router/index.js文件,用保存路由配置
2,在index.js中对路由器进行配置,将路由组件映射成为路由(首次集成配置较多)

/*
 *  路由器配置
 */
// vue-router依赖vue,先引入vue
import 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-router

2)使用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.js
import router from './router'

new Vue({
  el: '#app',
  router,// 等同于router: router
  components: { App },
  template: '<App/>'
})

main.js是程序的入口文件,所以在这里进行Vue实例化
路由器在Vue实例化时进行配置,所以需要引入路由配置(导出VueRouter对象给Vue使用)

注意:虽然VueRouter是默认导出,外部可以所以命名,但当前这种引入方式必须命名为router
因为router简写形式等同于router: router,这个key是不能变的,
所以,如果想做其他命名就不要使用简写形式了

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

App.vue:

<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>网上书城</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--路由链接-指定跳转地址-->
          <router-link to="/home" class="list-group-item">首页</router-link>
          <router-link to="/product" class="list-group-item">商品</router-link>
        </div>
      </div>

      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--动态显示组件区域-->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style>

</style>

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

六,测试工程

运行工程:

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

浏览器访问http://localhost:8080,默认重定向到http://localhost:8080/#/home
home
网上书城,默认显示首页,当点击商品切换路由组件显示:
product

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

七,结尾

由于这一篇需要对路由进行安装配置等前期操作
所以后续添加新的路由组件就没有这个复杂了
只要在此基础上昨天加就可以

一般来讲添加路由组件分为3个步骤:
1,在views定义路由组件
2,在router中映射成路由
3,在调用组件中写跳转<router-link>和显示<router-view>

在根目录添加了一个名为router-link-active的class
<style>
  .router-link-active {
    color: red !important;
  }
</style>

<router-link>链接激活时,默认被添加一个router-link-active的class
通过对router-link-active写样式来置选中项的样式

参照<router-link>的API,也可用下面的方式指定class名:
默认值可以通过路由的构造选项 linkActiveClass 来全局配置。