刷新组件
第一种 最直接整个页面重新刷新
location.reload() this.$router.go(0)
第二种 新建一个空白页面supplierAllBack.vue,点击确定的时候先跳转到这个空白页,然后再立马跳转回来
this.$router.replace({path:'/name',name:'edfw'})
第三种 provide / inject 组合 方式是我试过最实用的,下面用项目截图给大家说明下:首先,要修改下你的app.vue
<template> <div id="app"> <transition name="fade" mode="out-in"> <router-view v-if="isRouterAlive"></router-view> </transition> </div> </template> <script> export default { name: 'app', provide(){ //刷新当前界面 return{ reload:this.reload } }, data(){ return{ isRouterAlive: true, } }, methods:{ reload () { this.isRouterAlive = false this.$nextTick(() => (this.isRouterAlive = true)) } }, components: { } } </script> <style lang="scss"> body { margin: 0px; padding: 0px; } </style>
通过声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载,这边定义了
然后在需要当前页面刷新的页面中注入App.vue组件提供(provide)的 reload 依赖,然后直接用this.reload来调用就行
import { AddAdminUserGroup,UpAdminUserGroup} from '../../api/api'; export default { inject:['reload'], //跳转注入依赖 data() { return { DataList:"", //要编辑的菜单行 TitleMenu:0, //添加还是编辑标题 FormData: { //表单添加 Name: '' //组名 } } }, created:function() { this.reload();
}
}
路由跳转
this.$router.push({ path: '/roomlistlog' });
默认路由
export default new Router({ routes: [ {path: '/', redirect: 'goods'}, {path: '/goods', component: goods}, {path: '/ratings', component: ratings}, ] })
路由配置
//后台界面 { path: '/admin', component: admin, name: '登录' }, { path: '/404', component: NotFound, name: '', hidden: true,name: '错误页面' }, { path: '*', hidden: true, redirect: { path: '/404' }, title: "上海鼎鬲物联平台" }, { path: '/AdminHome', component: AdminHome, iconCls: 'el-icon-message',//图标样式class children: [ { path: '/404', component:NotFound}, { path: '/WebIndex', component:WebIndex,name:"后台主页"}, { path: '/SiteMenu', component:SiteMenu,name:"站点菜单管理", children:[{ path: '/AddSiteMenu', component:AddSiteMenu,name:"站点菜单设置"}] }, { path: '/DataInfor', component: DataInfor,name:"京东设备数据"} ] }