1、安装vue-router

npm install vue-router

2、在src下创建router文件夹，并在router文件夹中创建index.js文件

image.png

3、在index.js中引入vue和router

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router)
//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

// 创建路由， 懒加载形式
const router = new Router({
    mode: "hash", // history 模式
    routes: [{
        path: '/',
        redirect: 'login', // 默认路由
    },
    {
        path: '/login',
        name: 'login',
        component: resolve => require(['../components/login.vue'], resolve) // 指向该模块时，才加载对应的本地资源
    },{
        path: '/home',
        name: 'home',
        component: resolve => require(['../components/home.vue'], resolve),
        children: [ // 嵌套子路由
            {
                path: '/home/batchManagement',
                name: 'batchManagement',
                component: resolve => require(['../view/batch-management.vue'], resolve),
            }
        ]
    }]
})

// 将路由暴露出去
export default router

4、找到src文件中的main.js文件，并引入路由

import router from './router/index.js'; // 路由

new Vue({
  el: '#app',
  router, // 加入路由
  render: h => h(App),
}).$mount('#app')

5、路由的使用，在components文件夹中的创建Helloworld.vue文件

<div class="hello">
    <router-view></router-view>
</div>

以上步骤就可实现基本的路由导向了，下面是路由的二种传参形式

6、第一种，路由上以 ‘?’的形式拼接参数

首先我们在新建立一个路由的时候，在router文件夹下的index.js文件中

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router)
//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

// 创建路由， 懒加载形式
const router = new Router({
    mode: "hash", // history 模式
    routes: [{
        path: '/',
        redirect: 'login', // 默认路由
    },
    {
        path: '/login',
        name: 'login',
        component: resolve => require(['../components/login.vue'], resolve) // 指向该模块时，才加载对应的本地资源
    },
    {
        path: '/test',
        name: 'test',
        component: resolve => require(['../components/test.vue'], resolve), // 指向该模块时，才加载对应的本地资源
        query: {'id': 'id'} // 设置需要传过去的参数
    }]
})

// 将路由暴露出去
export default router

7、在components文件夹下创建test.vue文件

在这里我们假设，我们是从login.vue中跳转到test.vue中，这个时候，我们就需要在login.vue文件中这样跳转

<template>
  <div>
  
    <router-link :to="{ path: 'test', query: { id: 'first' } }">乘务管理</router-link>
  </div>
</template>
export default {
  methods: {
    // 这是说使用方法进行跳转
    information(data) {
      this.$router.push({name: 'test', params: {'id': data.id}})
    }
  }
}

8、在test文件中的接收

export default {
  data() {
    return {
      activeName: this.$route.query.id // 接收传来的ID
    };
  }
};

9、第二种，直接‘路由/id’传参，打开router文件夹下的index.js文件

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router)
//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

// 创建路由， 懒加载形式
const router = new Router({
    mode: "hash", // history 模式
    routes: [{
        path: '/',
        redirect: 'login', // 默认路由
    },
    {
        path: '/login',
        name: 'login',
        component: resolve => require(['../components/login.vue'], resolve) // 指向该模块时，才加载对应的本地资源
    },
    {
        path: '/test/:id',
        name: 'test/:id',
        component: resolve => require(['../components/test.vue'], resolve), // 指向该模块时，才加载对应的本地资源
    }]
})

// 将路由暴露出去
export default router

10、在test.vue中接收

export default {
  data() {
    return {
      id: '' // 用来接收传过来的ID值
    };
  },
  mounted() {
    this.id = this.$route.params.id // 接收传来的ID
  }
};