|
封装路由首先要明确的是业务需求，以及路由的基本原理
下面从几个点进行阐述：
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
cost originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push (location, onResolve, onReject) t
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)
}
}
|