这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

vue-router

目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习: router.vuejs.org/zh/

vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

安装

步骤一: 安装vue-router

npm install vue-router --save <!-- --save 运行时也需要 -->

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

第一步：导入路由对象，并且调用 Vue.use(VueRouter)
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例

------------src/router/index.js
// 配置路由相关信息
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. 通过Vue.use(插件)  安装插件
Vue.use(VueRouter)

// 创建VueRouter对象
const routes = [
  // 配置路由和组件之间的映射关系
]
const router = new VueRouter({
  routes
})

// 3. 将VueRouter对象传入vue实例
export default router

------------在main.js中挂载路由到vue实例中
import router from './router'   // 导入

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

使用vue-router的步骤:

第一步: 创建路由组件
第二步: 配置路由映射: 组件和路径映射关系
第三步: 使用路由: 通过<router-link>和<router-view>

<router-link>：vue-router里自动注册的全局组件，可以在任意位置用，最终会被渲染成a标签 <router-view>：用于决定渲染出来的组件在什么位置展现，组件渲染出来替换的位置

views文件夹就是放路由组件的，只不过将其他组件和路由组件分开放，便于管理

// 配置路由映射
import Home from '../components/Home.vue'
import About from '../components/About.vue'
const routes = [   
  {
    path : '/home',
    component : Home
  },
  {
    path : '/about',
    component : About
  }
]

// 使用路由
<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签. <router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.

网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和<router-view>处于同一个等级. 在路由切换时, 切换的是<router-view>挂载的组件, 其他内容不会发生改变.

遇到问题：Uncaught ReferenceError: Home is not defined 解决方法：在Home.vue里面，home没有加引号

export default {
  name : "Home"
};

路由默认值

默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容.但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以.

如何让路径默认跳转到首页, 并且<router-view>渲染首页组件呢? 只需要配置多配置一个映射就可以了

  {
    path : '/',
    redirect : '/home'
  },

配置解析: 在routes中又配置了一个映射. path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

修改为history模式

我们前面说过改变路径的方式有两种: URL的hash HTML5的history 默认情况下, 路径的改变使用的URL的hash url会有#，不美观，而history没有# 如果希望使用HTML5的history模式, 进行如下配置即可:

const router = new VueRouter({
  routes,
  mode : 'history'
})

在hash下，使用history.back()时，地址栏会有#，http://localhost:8080/test#/ 而在history模式下，地址栏为http://localhost:8080/test

<router-link>的其他属性

在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径.

<router-link>还有一些其他属性:

tag: tag可以指定<router-link>之后渲染成什么组件, 比如<router-link to="/home" tag="li">代码会被渲染成一个<li>元素, 而不是<a>

replace: replace不会留下history记录, 在指定replace的情况下, 后退键不能返回到上一个页面中

active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类. 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可. 

replace 没有快捷方式，只能在link里自己写 但active-class可以快捷改，

// 在路由里改
const router = new VueRouter({
  routes,
  mode : 'history',
  linkActiveClass : 'active'
})

exact-active-class 类似于active-class, 只是在精准匹配下才会出现的class. 后面看到嵌套路由时, 我们再看下这个属性.

路由代码跳转

有时候我们不想要用<router-link>，而是自己写 有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了 所有路由都是通过vue-router来处理

vue-router源码中给所有组件中都加了$router属性, 就是index里const的router对象 两种解决办法， 法一： 链接后面加时间戳， 法二：判断当前路径和你想要跳转的路基是否一样，如何一样，就不跳转了

export default {
  name: "App",
  methods : {
    homeClick () {
      this.$router.push('/home')
      // this.$router.replace('/home')
      // 上面的代码如果多次点击同一个按钮，会报错
    // if(this.$router.options.routes[1].path!='/home'){
    //   this.$router.replace('/home')
    //   console.log('1');
    // }
      // console.log('homeClick');
    },
    aboutClick (){
      this.$router.push('/about')
      // this.$router.replace('/about')
      // 上面的代码如果多次点击同一个按钮，会报错
    // if(this.$router.options.routes[1].path!='/about'){
    //   this.$router.replace('/about')
    //   console.log('2');
    // }
      // console.log('aboutClick');
    }
  }
}

动态路由

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

新建user组件 配置router的index文件，引入组件，配置routes path : '/user/:userId', 在app.vue中，

1. 利用v-bind 动态绑定 <router-link v-bind:to="'/user/' + userId">用户</router-link>
2. 想要在user组件中显示路由中的userId：$route `$route: 当前哪个路由处于活跃状态(当前显示(使用)的组件)，就获取哪个路由

   用户信息：{{$route.params.userId}}

   `

route（routes[]）-->route（$route）

routes[]路由数组，相当于家里的路由器，里面每一个值（route），相当于连接的每一台设备（每个人的手机、电脑、电视等） -->