vue2.x之路由(一)

路由其实就是一组映射关系（key-value）。其中key为路径，value可能就是function或组件。

路由的分类

路由分为前端路由和后端路由

1. 前端路由

前端路由中value是component，用于展示页面内容。

🐝 主要过程就是当浏览器的路径改变时，对应的组件就会展示。我们这里讲的路由也是指前端路由。

2. 后端路由

后端路由中的value是function，用于处理客户端提交的请求。

🐝 主要过程就是服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

路由的安装配置

⏰  安装

npm install vue-router

这一步一定要注意安装的版本，使用这个命令一般安装的都是最新版本（现在的日期应该是4.x版本），如果我们是在vue2中使用vue-router的话，请使用下面的命令

npm i vue-router@3

⏰ 在src下新建一个router文件夹，里面新建个index.js文件。

index.js文件内容如下：

// 路由配置文件
import VueRouter from 'vue-router';
import Home from '../components/myHome';

export default new VueRouter({
  routes: [
    {
      // path是路径
      path: "/home",
      //跳转的组件
      component: Home
    },       
  ]
})

⏰ 在main.js中添加如下代码

import VueRouter from 'vue-router';
import router from './router';

Vue.use(VueRouter);
new Vue({
  render: h => h(App),
  store,
  router
}).$mount('#app')

至此路由的简单配置就完成了，下面就可以使用路由了。

路由的简单使用

在讲路由的使用之前我们先来看两个标签，router-link和router-view。

router-link

router-link组件支持用户在具有路由功能的应用中点击导航。其中to属性指定路径。router-link最后默认被解析成a标签，如果你想要解析成别的标签，可以通过配置tag属性。当目标路由成功激活时，链接元素自动设置一个表示激活的CSS类名。

<router-link to="/home"></router-link>

router-link组件可以配置以下属性：

• to: 必传, 表示目标路由的链接。一般是我们配置的路由信息的path属性
• replace：布尔型，设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
• append： 布尔型，表示是否在当前相对路径前添加基路径，如果设置为true，to配置的是'/b'，表示的是'/a/b'，如果设置为false，就是'/b'
• tag: 配置router-link渲染成的某标签
• active-class：设置激活时使用的css类名。
• exact：布尔型。是否激活类名的依据是包含匹配。
• event: 声明可以用来触发导航的事件。
• exact-active-class: 配置当链接被精确匹配的时候应该激活的class

• aria-current-value: 当链接根据精确匹配规则激活时配置的 aria-current 的值.

router-view

router-view是一个视图组件，将路径匹配组件渲染出来。它除了搭配router-link来使用之外，它还可以搭配transition和keep-alive一起使用。

相比router-link的属性来说，router-view的属性比较简单，就一个name属性, 这个name属性是和组件的name属性相匹配的。

<router-view name="home"></router-view>

基本用法

⏰ 1. 在app.vue里面配置

<template>
  <div id="app">
    <p>
      <router-link to="/home">主页</router-link>
      <router-link to="/about">关于</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

⏰ 2. 在router里面配置

// 路由配置文件
import VueRouter from 'vue-router';
import Home from '../components/myHome';
import About from '../components/about';

export default new VueRouter({
  routes: [
    {
      // path是路径
      path: "/home",
      //跳转的组件
      component: Home
    },
    {
      // path是路径
      path: "/about",
      //跳转的组件
      component: About
    }     
  ]
})

效果如下：