vue-router的二次封装
2023-06-13 09:12:15 时间
本文介绍对vue-router的二次封装通过对vue-router的二次封装,即可实现通过component
自动生成path和name值,不用频繁的进行重复引用 如下 未封装前
{
path:'/login',
name:'login',
component:()=>import('../../views/login')
component:'login/index'
},
封装后
{
component:'login/index'
}
经过封装后代码简化了许多,但功能却一样,这在路由较多时好处非常大 接下来我们来封装vue-router 我们要实现的功能
- 通过
component
自动生成path
,name
- 当指定了
path
、name
值程序不会自动生成 - 当component存在
index
时path
、name
自动屏蔽如component:login/index
对应name值为login
path值为\login
首先我们在src目录新建配置文件commom/config/router.js
这个配置文件用于声明项目中使用到的路由 暂时键入
let routes = [
{
path:'/login',
name:'login',
component:()=>import('../../views/login')
component:'login/index'
},
]
在src目录新键router.js
键入如下
import Vue from 'vue';
import Router from 'vue-router';
import routes from './common/config/router.js'
Vue.use(Router);
export default new Router({
routes
})
在main.js文件引入router.js
import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from './router.js'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
接下来我们完善commom/config/router.js
1.定义获取路由方法
//获取路由信息
let getRoutes = function(){
//生成路由详细信息
createRoute(routes)
return routes;
}
2.定义生成路由方法
function createRoute(arr){
for(let i=0;i<arr.length;i++){
/*没有component的路由 如path='*'*/
if(!arr[i].component)return
//去除index
let value = getValue(arr[i].component)
//生成name(login/text==login_text)
arr[i].name = arr[i].name || value.replace(/\//g,'_')
//生成path
arr[i].path = arr[i].path || `/${value}`
//自动component
let componentFun = import(`../../views/${arr[i].component}.vue`)
arr[i].component = ()=>componentFun
//递归生成子路由
if(arr[i].children && arr[i].children.length>0){
createRoute(arr[i].children)
}
}
}
3.去除index后缀方法
function getValue(str){
//获取最后一个‘/’的索引
let index = str.lastIndexOf('/')
//获取反斜杠后面的值
let val = str.substring(index+1,str.length)
//判断是不是index结尾
if(val==='index'){
//login/index == login
return str.substring(index,-1)
}else{
return str;
}
}
4.导入routes
export default getRoutes()
接下来我们就可以在通过component自动生成path和name值了
如
let routes = [
{
path:'/',
name:'layout',
redirect:{name:'index'},
component:()=>import('../../views/layout.vue'),
component:'layout',
children:[
{
component:'index/index'
/*
生成后:
path:/index
name:index
*/
},
{
component:"shop/goods/list"
/*
生成后:
path:/shop/goods/list
name:shop_goods_list
*/
}
]
},
{
component:'login/index'
/*
生成后
path:/login
name:login
*/
},
{
path:'*',
redirect:{name:'index'}
}
]
相关文章
- 不用React Vue,只用原生JS,如何开发单页面应用?
- Vue 箭头函数
- Vue框架控制台Console提示You are running Vue in development mode
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- 【说站】解决vue项目在npm run build打包的时候报错
- vue源码分析-从new Vue开始
- vue之图片上传组件封装
- 记录第三天-Vue组件
- vue页面刷新方法_vue返回上一页怎么实时刷新
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- Vue组件封装的过程[通俗易懂]
- Vue的computed和watch的区别是什么?_2023-03-01
- Vue CLi v3 创建项目使用记录
- vue 获取 DOM 元素的方法
- 初识renren-fast-vue
- vue.js入门篇之Vue.js 样式绑定
- vue main.js中app绑定的是index.html还是App.vue中详解编程语言
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue用Redis储存获取数据(vue获取redis)
- Vue调用Redis体验更好的开发效率(vue能调redis吗)
- Vue如何连接Redis(vue怎么连接Redis)
- Vue搭配Redis做针对性取值(vue redis取值)