Discussion
Discussion copied to clipboard
when use dynamic components with the is attribute, the browser's url can't good work.
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');
You should probably use router.push("...") to change to a new view - I cannot reproduce the problem with this function.