zoukankan      html  css  js  c++  java
  • 路由

    刷新组件

    第一种  最直接整个页面重新刷新

    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:"京东设备数据"}
            ]
        }
    复制代码
  • 相关阅读:
    Js获取时间,当前,一周前,一月前的时间,时间戳转换,时间格式化,日期格式化
    echarts图随窗口大小的变化而变化
    Vue中使用Google地图插件
    element el-progress渐变色进度条
    Vue中使用mixins
    CSS3 使用 calc() 计算高度 vh px
    element-ui饿了么框架中导航菜单中箭头方向问题
    Vue中使用QRcode.js生成二维码---qrcodejs2
    鼠标经过时显示样式的两种方法
    element 按钮样式:确认按钮发布后样式发生改变
  • 原文地址:https://www.cnblogs.com/miaoyiyan/p/9598072.html
Copyright © 2011-2022 走看看