多路由单组件

当我们使用单个组件绑定多个路由的时候，路由的跳转并不能再次触发组件的重建，此时我们需要对路由进行监视。

使用同一组件进行新建以及编辑

这里我们将修改ServiceAdd组件，来进行新建以及编辑的不同处理。

添加编辑路由

我们在main.js中添加编辑服务的路由，与新建使用一个组件；

将组件初始化事件进行调整

接下来我们调整组件的初始化事件，使其判断当前路由并进行相关处理：

mounted() {
    var that = this;// 初始化检测that.init();
    // 设置iCheck插件初始化SetICheck(that);
    // 设置switchery插件初始化SetSwitchery(that);
    // 设置daterangepicker插件初始化SetDaterangepicker(that, '#single_cal3');},
    // 监视路由watch: {$route() {// 当路由改变，进行初始化检测this.init();}
};

相关时间处理

下面是一些初始化检测，以及相关调用的事件

methods: {
// 初始化事件init() {var that = this;
// isEdit?if (that.$route.params.id) {
    that.edit(that.$route.params.id);} 
    else {var data = initData();
    // 初始化默认值that.setChange(data);
    $.each(data, (key, item) => {
    that.$set(that, key, item);});
    }},
    // 编辑事件
    edit(id) {
    var that = this;that.$set(that, 'isNew', false);
    // 获取服务数据，这里使用模拟数据$.get(`./static/service1.json`, repo => {
    // 设置组件data的值that.setChange(repo);$.each(repo, (key, item) => {
    that.$set(that, key, item);
    });});},
    // 对插件进行赋值设置
    setChange(item) {
    var that = this;// 设置iCheck赋值
    $(`input.flat[name="type"][value="${item.type}"]`).iCheck('check');// 设置switchery赋值
    if (item.state !== that.state) {$('.js-switch[name="state"]').trigger('click');}
    if (item.directIssue !== that.directIssue) {
    $('.js-switch[name="directIssue"]').trigger('click');}
    },
    submit() {
    var that = this,text;// 先做一些简单的校验，不通过则显示错误信息
    if (!that.name) {text = '请填写名称';}if (text) {that.error.text = text;that.error.shown = true;return;}
    that.error.shown = false;var that = this;
    that.$router.push('/app/terminals');
    }}

页面效果

• 新建

• 编辑

结束语

当初对于多个路由匹配单个组件，本骚年还以为一定会有一些方法，在路由改变的时候进行销毁重建组件，后来找不到，最终也就监视路由进行处理。虽然有可能是本骚年太蠢没找到对应的方法调用，但是其实这种监视路由处理的方法或许更合理一些呢。

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » vue教程【九】- 监视路由