关于 VUE 页面跳转

1，目录如下：

 

 

 

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

{   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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

<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="width: 200px" v-model="demoForm.paramterA" ></el-input>                              </el-form-item>                              <el-form-item label="标签名B：" >                                    <el-input style="width: 200px" v-model="demoForm.paramterB" ></el-input>                              </el-form-item>                             <el-form-item label="标签名C：" >                                    <el-input style="width: 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>

　　

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