关于 VUE 页面跳转

1，目录如下：

2，路径配置如下：router/index.js

{
  path: '',
  component: Layout,
  redirect: 'index',
  children: [
    {
      path: '/demoUrl',
      component: (resolve) => require(['@/views/demo/index'], resolve),
      name: '模型',
      meta: { title: '模型测试', icon: 'dashboard', noCache: true, affix: true },
      hidden: true
    }
  ]
},

3，vue页面：views/demo/index.vue

<template>
    <el-container>
         <el-form ref="demoForm" :model="serverModelForm" label-width="210px" size="mini">
                 <el-row>
                       <el-col :span="34">
                            <el-form-item label="标签名A：" >
                                   <el-input style=" 200px" v-model="demoForm.paramterA" ></el-input>
                             </el-form-item>
                             <el-form-item label="标签名B：" >
                                   <el-input style=" 200px" v-model="demoForm.paramterB" ></el-input>
                             </el-form-item>
                            <el-form-item label="标签名C：" >
                                   <el-input style=" 200px" v-model="demoForm.paramterC" ></el-input>
                             </el-form-item>
                        </el-col>
               </el-row>
         </el-form>
         <el-footer style="display: flex;align-items: center;justify-content: center;padding: 50px;margin: 0px auto;">
              <el-button  type="mini" style="margin-left:20px;, color: red" circle @click="clickButton">点击按钮</el-button>
         </el-footer>
   </el-container>
</template>

<script>

 export default {
  data() {
    return {
       //封装数据
         demoForm: {
             paramterA:"",
             paramterB:"",
             paramterC:"",
        },
      
     // 校验规则
      rules: {
                 //参数A字端段校验
              paramterA:[
                 { required: true,              //是否必填
                    message: '信息不能为空',      //规则
                    trigger: 'blur'              //何事件触发
                  },
                 //可以设置双重验证标准
                 { min: 2, max: 5,  message: '长度在 2 到 5 个字符', }
                ],
		    },		
        };
     },
  };


//位置与data平级
created(){
   this.preExecMethod();   //页面加载时默认提前执行的方法
  },

//封装方法
methods: {
    //点击“完成”按钮
    clickButton(){
      this.$refs["demoForm"].validate(valid => {
        if (valid) {
          //路径router下对应的url
           this.$router.replace('/demoUrl');
        }else{
             alert("页面跳转失败!");
            }
      });
    },
}

</script>

　　

点击按钮，实现页面跳转；====》》》