Discussion icon indicating copy to clipboard operation
Discussion copied to clipboard

when use dynamic components with the is attribute, the browser's url can't good work.

Open iAmHades opened this issue 10 years ago • 1 comments

Hey! I've meet some trouble. I have some components ,use dynamic components to change the view. index.vu is the first page.

<template>
    <div id="wrapper">
        <!--左侧菜单-->
        <menu></menu>
        <div id="page-wrapper" class="gray-bg dashbard-1">
            <!--导航栏-->
            <navigation></navigation>
            <div class="row  border-bottom white-bg dashboard-header">
                <component is="{{view}}"
                           class="view"
                           params="{{params}}"
                           v-transition
                           transition-mode="out-in">
                </component>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        el: '#app',
        props: ['view'],
        data: {
            view: '',
            root: 'http://localhost:8115',
            params: {
                userid: null
            }
        },
        components: {
            'menu': require('./menu.vue'),
            'navigation': require('./navigation.vue'),
            'individualUserAuthentication': require('./user/individualUserAuthentication.vue'),
            'enterpriseUserAuthentication': require('./user/enterpriseUserAuthentication.vue'),
            'enterpriseWorker': require('./user/enterpriseWorker.vue'),
            'freeWorker': require('./user/freeWorker.vue'),
            'enterpriseService': require('./user/enterpriseService.vue'),
            'humanRequirment': require('./user/humanRequirment.vue'),
            'projectRequirment': require('./user/projectRequirment.vue'),
            'userInfo': require('./user/userInfo.vue'),<------------- 这里加载
            '404': require('./404.vue'),
            '500': require('./500.vue')
        }
    }
</script>

<style lang="stylus">
</style>

userInfo.vue is the subpage

<template>
    <ch_form formdatas="{{formdatas}}" columns="{{columns}}" readonly="{{readonly}}" tools="{{tools}}"></ch_form>
</template>
<script>
    module.exports = {
        props: ['params'],
        data: function () {
            return {
                readonly: null,
                formdatas: {},
                params: {
                    userid: null
                },
                columns: {
                    userName: '用户名',
                    realName: '真实姓名',
                    mobileNo: '手机号',
                    userType: '用户类型',
                    isProvide: {name: '是否是提供商', type: 'radio'},
                    isRequirement: {name: '是否是需求方', type: 'radio'},
                    emailAddress: '邮寄地址',
                    addresses: '住宿地址',
                    account: '账户资金'
                },
                userType:null
            }
        },
        compiled: function () {
            this.initData();
        },
        watch: {
            'params.userid': 'initData'
        },
        methods: {
            initData: function () {
                var me = this;
                this.$http.get(this.$root.root + '/getUserInfoById', {id: this.$root.params.userid}, function (data, status, request) {
                    if (data.code == 100) {
                        me.formdatas = data.data;
                        me.readonly = true;
                        me.userType=data.data.userType;
                    }
                });
            },
            confirm: function () {
                var me = this;
                this.$http.get(this.$root.root + '/authConfirm', {id: this.$root.params.userid}, function (data, status, request) {
                    if (data.code == 100) {
                        if(me.userType=='2'){
                            this.$root.view='individualUserAuthentication';<------------这里切换view
                        }else if(me.userType=='3'){
                            this.$root.view='enterpriseUserAuthentication';
                        }else{
                            this.$root.view='500';
                        }
                    }
                });
            },
            reject: function () {
                var me = this;
                this.$http.get(this.$root.root + '/authReject', {id: this.$root.params.userid}, function (data, status, request) {
                    if (data.code == 100) {
                        if(me.userType=='2'){
                            this.$root.view='individualUserAuthentication';
                        }else if(me.userType=='3'){
                            this.$root.view='enterpriseUserAuthentication';
                        }else{
                            this.$root.view='500';
                        }
                    }
                });
            }


        },
        destroyed: function () {

        },
        components: {
            ch_form: require('../../components/ch_form.vue')
        }
    };

</script>

in this page, I use like this.$root.view='enterpriseUserAuthentication' to change the view, but,The browser's address bar will appear '?' before '#', just like http://localhost:3000/?#/userInfo/55ee9b0c4b13237e45a3d790 , this will let the route failure. my route is director. the route's code is

var Vue = require('vue');
Vue.use(require('vue-resource'));
var Router = require('director').Router;
var app = new Vue(require('./views/index.vue'));
var router = new Router();

//个体用户认证
router.on('/individualUserAuthentication', function () {
  app.view = 'individualUserAuthentication';
});

//企业用户认证
router.on('/enterpriseUserAuthentication', function () {
  app.view = 'enterpriseUserAuthentication';
});

//用户详情--个体用户认证详情页面
router.on('/userInfo/:userid', function (userid) {
  app.view = 'userInfo';
  app.params.userid=userid;
});

//企业人力
router.on('/enterpriseWorker', function (userid) {
  app.view = 'enterpriseWorker';
});

//个人人力
router.on('/freeWorker', function (userid) {
  app.view = 'freeWorker';
});

//企业服务
router.on('/enterpriseService', function (userid) {
  app.view = 'enterpriseService';
});

//人力需求
router.on('/humanRequirment', function (userid) {
  app.view = 'humanRequirment';
});

//项目需求
router.on('/projectRequirment', function (userid) {
  app.view = 'projectRequirment';
});








router.on('/index', function () {
  app.view = 'index';
});


//404页面
router.on('/404', function () {
  app.view = '404';
});
//500页面
router.on('/500', function () {
  app.view = '500';
});

router.configure({
  notfound: function () {
    router.setRoute('/404')
  }
});

router.init('/index');

iAmHades avatar Sep 09 '15 16:09 iAmHades

You should probably use router.push("...") to change to a new view - I cannot reproduce the problem with this function.

falco467 avatar Sep 14 '17 13:09 falco467