Vue系列vue-router的配置使用（一）

前言

因为Vue目前市场比较火，企业也在大量使用，很多后端小伙伴面试的时候，可能也遭遇到了毒打，明明是后端开发，为何还要要求会Vue呢？相信大家也知道，很多时候后端开发人员都是会点前端知识的，这样大家配合工作的效率相对而言就比较高，说白了，都会一点有啥不好，废话不多说啊，向全栈奔跑就完了。

一、效果大图

首先如何使用vue-cli3创建Vue项目脚手架，小编在其他课程里面也有写过，不懂的自信翻阅，该demo使用vue-cli创建。

业务说明：默认网站首页，点击按钮或者链接能够跳到不同的页面。

1、网站默认首页效果图（注：链接地址，http://localhost:8080，跳转到默认首页地址（http://localhost:8080/welcome)，并且有首页相关内容）

2、点击按钮去到不同的页面，渲染网页主体内容

二、vue-router配置

1、工程大概模块

2、App.vue入口

注释的地方有说明，可自信放开测试

<template>
  <div id="app">
      <!--1、router-link默认渲染成a标签，使用tag可以渲染成button或者li-->
      <!--2、active-class="active" 修改自定义选中样式-->
      <!--<router-link to="/home" tag="button" replace active-class="active">首页</router-link>
      <router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
      <!--3、全局路由配置linkActiveClass全局修改router-link中的选中属性-->
      <!--<router-link to="/home" tag="button" replace>首页</router-link>
      <router-link to="/about" tag="button" replace>关于</router-link>-->
      <!--4、使用代码的方式该表路由路径-->
      <button @click="homeClick">首页</button>
      <button @click="aboutClick">关于</button>
      <!--路由占位符-->
      <router-view></router-view>
  </div>
</template>

<script>
  export default {
      name: 'app',
      methods: {
          // 监听，触发事件的方式改变路由 vue-router
          homeClick() {
              // 拿到属性，调用push方法,每次点击完毕后还能使用浏览器按钮返回，即可实现，如果不返回使用replace
              this.$router.push('/home')
              //this.$router.replace('/home')
              console.log('homeClick')
          },
          aboutClick() {
              this.$router.push('/about')
              //this.$router.replace('/about')
              console.log('aboutClick')
          }
      }
  }
</script>

<style>
    /*.router-link-active{
        color: #ff0000;
    }*/
    .active{
        color: #2665d2;
    }
</style>

3、router.js 路由配置

import Vue from 'vue'
// 1、导入路由配置相关信息
import VueRouter from 'vue-router'
import Welcome from "../components/Welcome";
import Home from "../components/Home";
import About from "../components/About";

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

// 重写路由的push方法 （解决：Error: Avoided redundant navigation to current location: 的错），必须放在创建VueRouter对象的前面，否则不生效
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

// 3、创建VueRouter对象
const routes = [
  {
    path: '/',
    // redirect重定向 （设置路由默认路径）
    redirect: '/welcome'
  },
  {
    path: '/welcome',
    component: Welcome
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  // 配置路由和组件的之间的映射关系
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  // linkActiveClass全局修改router-link中的选中属性
  linkActiveClass: 'active'
})

// 4、将router对象传入到vue实例中 （导出）
export default router

注意：当我们重复点击相同页面的时候，可能会出现一个错误，不影响程序执行，看着揪心，这时候我们可以重写路由的push方法 （解决：Error: Avoided redundant navigation to current location: 的错），必须放在创建VueRouter对象的前面，否则不生效

解决：Error: Avoided redundant navigation to current location: 的错

4、main.js 项目的入口文件，实例化Vue，放置项目中经常会用到的插件和CSS样式

import Vue from 'vue'
import App from './App.vue'
// 挂载路由进行使用
import router from './router'
import store from './store'
import './plugins/element.js'

Vue.config.productionTip = false

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

5、页面视图，随便一个，大家都会写

<template>
  <div>
    <h1>我是首页</h1>
    <p>我是首页内容，哈哈哈</p>
  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>
</style>

三、总结

vue-router的配置使用，router-link：跳转链接，参数to：就是跳转到的链接位置

vue-router路由中有三个基本的概念 route, routes, router。

1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。

2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.