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
}
};
