vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

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

Open iAmHades opened 9 years ago

iAmHades commented 9 years ago

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');
falco467 commented 7 years ago

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