vue路由的封装与使用

封装路由首先要明确的是业务需求，以及路由的基本原理

下面从几个点进行阐述：

1.关于路由的目录结构

router
        index.is
        routes is

         index.js文件里面存放的是关于路由的一些基本配置

index.js

import Vue from 'vue'
import VueRouter from "vue-router"
import routes from '/routes'

Vue.use(VueRouter)

// 解決编程式路由住同一地址跳转时会报错的恃观
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) {
        return originalPush.call(this, location, onResolve, onReject)
    } else {
        return originalPush.call(this, location).catch(err => err)
    }
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
    if (onResolve || onReject) {
        return originalReplace.call(this, location, onResolve, onReject)
    } else {
        return originalReplace.call(this, location).catch(err => err)
    }
}
const router = new VueRouter({
    routes
})
export default router;

        routes.js里面放的是定义的路由路径

routes.js

// 定义路由路径
const routes = [
    {
        path:'/home',
        component:()=› import ('@/views/home.vue')
    },
    {
        path:'/about',
        component:()=> import('@/views/about.vue')
    },
    // 重定向
    {
        path: '/',
        redirect:'/home'
    }
]

export default routes;

        最后将这些文件在main.is文件里面引入

main.js

import Vue from "vue"
import App from "./App.vue"
import router from "./router"

Vue. config.productionTip = false

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

2.详解封装步骤与思路

        首先我们要在项目中进行安装路由 npm i vue-router --save

        然后再index.js文件中进行引入并进行使用

        

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

        之后我们就进行路由路径的配置

const router = new VueRouter({
    routes
})

         因为我们进行的是路由模块化的处理。为了更简洁方便的进行频繁的使用路由的配置
所以就把路由路径放到一个独立的文件routes.js中，然后我们在index.js文件中 引入就可以了

import routes from './routes'

         在routes.js文件中进行定义路由路径，path指的是要跳转的路径，component指的是跳转路径的组件，这其中设置了一个重定向，因为我们初始化页面的时候路径为"/"，因为我们没有定义路径为"/"的组件，所以我们就把路径为"/"的时候重定向为"/home",这样的话在我们初始化页面的时候
就会看到路径为"/home"的组件页面了

// 定义路由路径
const routes = [
    {
        path:'/home',
        component:()=› import ('@/views/home.vue')
    },
    {
        path:'/about',
        component:()=> import('@/views/about.vue')
    },
    // 重定向
    {
        path: '/',
        redirect:'/home'
    }
]

export default routes;

        这些操作之后我们就需要在main.js文件中进行引入并进行挂载

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

        在这些都完成之后路由封装的第一阶段便已完成，接下来就是进行使用了，在这里我使用的是编程式路由跳转，也就是使用this.$router.push()进行操作，需要给一个事件来进行触发

        

this.$router.push({
    path:'/home'
})

也可以带参数

this.$router.push({
    path:'/about',
    query:{
        id:'123'
    }
})

        <router- view></router-view>类似于占位符，这个就代表路由跳转的页面；
这个时候有两种情况需要考虑，第一就是类似于tab页一样，只切换部分页面，另一种就是整
个页面完全切换

App.vue

<template>
    <div>
        <button @click="about">about</button>
        <button @click="home">home</button>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
methods: {
home(){
    this.$router.push({
        path:"/home"
    })
},
about(){
    this.$router.push({
        path:"/about",
        query:{
            id:"123"
        }
    })
}
</script>

home.vue

<template>
    <div>
        <h1>home页面</h1>
    </div>
</template>

<script>
export default {
methods: {}
};
</script>
<style>
</style>

about.vue

<template>
    <div>
        <h1>about页面</h1>
    </div>
</template>

<script>
export default {
methods: {}
};
</script>
<style>
</style>

        整个页面完全切换

App.vue

<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
methods: {}
</script>

home.vue

<template>
    <div>
        <button @click="about">about</button>
        <h1>home页面</h1>
    </div>
</template>

<script>
export default {
methods: {
    about(){
    this.$router.push({
        path:"/about",
        query:{
            id:"123"
        }
    })
  }
};
</script>
<style>
</style>

about.vue

<template>
    <div>
        <button @click="home">home</button>
        <h1>about页面</h1>
    </div>
</template>

<script>
export default {
methods: {
    home(){
    this.$router.push({
        path:"/home"
    })
   }
};
</script>
<style>
</style>

3.需要注意的点以及可能出现的报错
        以上的封装基本完成，但是可能会出现一个报错，就是重复跳转路由，也就是同一个路由路
径重复使用了，为子解决编程式路由往同一地址跳转时会报错的情況，在indexjs文件中添加这段代码，其中replace和push是编程式导航的方法

const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
if (onResolve || onReject) {
return originalpush.call(this, location, onResolve, onReject)
} else {
return originalPush.call(this, location).catch(err => err)
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
if (onResolve || onReject) {
return originalReplace.call(this, location, onResolve, onReject)
} else {
return originalReplace.call(this, location).catch(err =› err)
    }
}