1、安裝vue-router
npm install vue-router
2侨拦、在src下創(chuàng)建router文件夾稠通，并在router文件夾中創(chuàng)建index.js文件
image.png
3、在index.js中引入vue和router
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
//獲取原型對(duì)象上的push函數(shù)
const originalPush = Router.prototype.push
//修改原型對(duì)象中的push方法
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
// 創(chuàng)建路由殖妇， 懶加載形式
const router = new Router({
mode: "hash", // history 模式
routes: [{
path: '/',
redirect: 'login', // 默認(rèn)路由
},
{
path: '/login',
name: 'login',
component: resolve => require(['../components/login.vue'], resolve) // 指向該模塊時(shí)刁笙，才加載對(duì)應(yīng)的本地資源
},{
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文件夾中的創(chuàng)建Helloworld.vue文件
<div class="hello">
<router-view></router-view>
</div>
以上步驟就可實(shí)現(xiàn)基本的路由導(dǎo)向了，下面是路由的二種傳參形式
6摘悴、第一種峭梳，路由上以 ‘?’的形式拼接參數(shù)
首先我們?cè)谛陆⒁粋€(gè)路由的時(shí)候，在router文件夾下的index.js文件中
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
//獲取原型對(duì)象上的push函數(shù)
const originalPush = Router.prototype.push
//修改原型對(duì)象中的push方法
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
// 創(chuàng)建路由蹂喻， 懶加載形式
const router = new Router({
mode: "hash", // history 模式
routes: [{
path: '/',
redirect: 'login', // 默認(rèn)路由
},
{
path: '/login',
name: 'login',
component: resolve => require(['../components/login.vue'], resolve) // 指向該模塊時(shí)葱椭，才加載對(duì)應(yīng)的本地資源
},
{
path: '/test',
name: 'test',
component: resolve => require(['../components/test.vue'], resolve), // 指向該模塊時(shí)，才加載對(duì)應(yīng)的本地資源
query: {'id': 'id'} // 設(shè)置需要傳過(guò)去的參數(shù)
}]
})
// 將路由暴露出去
export default router
7口四、在components文件夾下創(chuàng)建test.vue文件
在這里我們假設(shè)孵运，我們是從login.vue中跳轉(zhuǎn)到test.vue中，這個(gè)時(shí)候蔓彩，我們就需要在login.vue文件中這樣跳轉(zhuǎn)
<template>
<div>
<router-link :to="{ path: 'test', query: { id: 'first' } }">乘務(wù)管理</router-link>
</div>
</template>
export default {
methods: {
// 這是說(shuō)使用方法進(jìn)行跳轉(zhuǎn)
information(data) {
this.$router.push({name: 'test', params: {'id': data.id}})
}
}
}
8治笨、在test文件中的接收
export default {
data() {
return {
activeName: this.$route.query.id // 接收傳來(lái)的ID
};
}
};
9、第二種赤嚼，直接‘路由/id’傳參旷赖，打開(kāi)router文件夾下的index.js文件
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router)
//獲取原型對(duì)象上的push函數(shù)
const originalPush = Router.prototype.push
//修改原型對(duì)象中的push方法
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
// 創(chuàng)建路由， 懶加載形式
const router = new Router({
mode: "hash", // history 模式
routes: [{
path: '/',
redirect: 'login', // 默認(rèn)路由
},
{
path: '/login',
name: 'login',
component: resolve => require(['../components/login.vue'], resolve) // 指向該模塊時(shí)更卒，才加載對(duì)應(yīng)的本地資源
},
{
path: '/test/:id',
name: 'test/:id',
component: resolve => require(['../components/test.vue'], resolve), // 指向該模塊時(shí)杠愧，才加載對(duì)應(yīng)的本地資源
}]
})
// 將路由暴露出去
export default router
10、在test.vue中接收
export default {
data() {
return {
id: '' // 用來(lái)接收傳過(guò)來(lái)的ID值
};
},
mounted() {
this.id = this.$route.params.id // 接收傳來(lái)的ID
}
};
