三、Vue使用ElementUI及路由传参

1. 创建hello-vue项目并运行测试

   #创建项目
   vue init webpack hell-vue
   #进入工程目录
   cd hello-vue
   #安装vue-routern 
   cnpm install vue-router --save-dev
   #安装element-ui
   cnpm i element-ui -S
   #安装依赖
   cnpm install
   # 安装SASS加载器
   cnpm install sass-loader node-sass --save-dev
   #启功测试
   cnpm run dev
   

2. src/views/Login.vue

   <template>
     <div>
       <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
         <h3 class="login-title">欢迎登录</h3>
         <el-form-item label="账号" prop="username">
           <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
         </el-form-item>
         <el-form-item label="密码" prop="password">
           <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
         </el-form-item>
       </el-form>
   
       <el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
         <span>请输入账号和密码</span>
         <span slot="footer" class="dialog-footer">
             <el-button type="primary" @click="dialogVisible = false">确定</el-button>
           </span>
       </el-dialog>
     </div>
   </template>
   
   <script>
       export default {
           name: "Login",
         data(){
             return{
               form:{
                 username:'',
                 password:''
               },
               //表单验证，需要在 el-form-item 元素中增加prop属性
               rules:{
                 username:[
                   {required:true,message:"账号不可为空",trigger:"blur"}
                 ],
                 password:[
                   {required:true,message:"密码不可为空",tigger:"blur"}
                 ]
               },
   
               //对话框显示和隐藏
               dialogVisible:false
             }
         },
         methods:{
             onSubmit(formName){
               //为表单绑定验证功能
               this.$refs[formName].validate((valid)=>{
                 if(valid){
                   //使用vue-router路由到指定界面，该方式称为编程式导航
                   this.$router.push('/main');
                 }else{
                   this.dialogVisible=true;
                   return false;
                 }
               });
             }
         }
       }
   </script>
   
   <style lang="scss" scoped>
     .login-box{
       border:1px solid #DCDFE6;
       width: 350px;
       margin:180px auto;
       padding: 35px 35px 15px 35px;
       border-radius: 5px;
       -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       box-shadow: 0 0 25px #909399;
     }
     .login-title{
       text-align:center;
       margin: 0 auto 40px auto;
       color: #303133;
     }
   </style>
   
   

3. src/views/Main.vue

   <template>
   	<div>首页</div>
   </template>
   <script>
   	export default {
   			name:"Main"
   	}
   </script>
   <style scoped>
   </style>
   

4. src/router/index.js

   //导入vue
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   //导入组件
   import Main from "../views/Main";
   import Login from "../views/Login";
   //使用
   Vue.use(VueRouter);
   //导出
   export default new VueRouter({
     routes: [
       {
         //登录页
         path: '/main',
         component: Main
       },
       //首页
       {
         path: '/login',
         component: Login
       },
     ]
   
   })
   

5. src/App.vue

   <template>
     <div id="app">
       <router-view></router-view>
     </div>
   </template>
   
   <script>
   
   
   export default {
     name: 'App',
   
   }
   </script>
   
   <style>
   #app {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>
   

6. src/main.js

   // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import App from './App'
   import router from "./router"
   
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(router)
   Vue.use(ElementUI)
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     render:h=>h(App)
   })
   
   

7. 路由嵌套

   views/user/Profile.vue

   <template>
     <h1>个人信息</h1>
   </template>
   <script>
     export default {
       name: "UserProfile"
     }
   </script>
   <style scoped>
   </style>
   

   views/user/List.vue

   <template>
     <h1>用户列表</h1>
   </template>
   <script>
     export default {
       name: "UserList"
     }
   </script>
   <style scoped>
   </style>
   

   修改Main.vue

   <template>
       <div>
         <el-container>
           <el-aside width="200px">
             <el-menu :default-openeds="['1']">
               <el-submenu index="1">
                 <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
                 <el-menu-item-group>
                   <el-menu-item index="1-1">
                   <!--个人信息页面显示路由-->
                     <router-link to="/user/profile">个人信息</router-link>
                   </el-menu-item>
                   <el-menu-item index="1-2">
                   <!--用户列表显示路由-->
                     <router-link to="/user/list">用户列表</router-link>
                   </el-menu-item>
                 </el-menu-item-group>
               </el-submenu>
               <el-submenu index="2">
                 <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
                 <el-menu-item-group>
                   <el-menu-item index="2-1">分类管理</el-menu-item>
                   <el-menu-item index="2-2">内容列表</el-menu-item>
                 </el-menu-item-group>
               </el-submenu>
             </el-menu>
           </el-aside>
   
           <el-container>
             <el-header style="text-align: right; font-size: 12px">
               <el-dropdown>
                 <i class="el-icon-setting" style="margin-right: 15px"></i>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>个人信息</el-dropdown-item>
                   <el-dropdown-item>退出登录</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </el-header>
             <el-main>
             <!--此处加载所点击路由的视图-->
               <router-view />
             </el-main>
           </el-container>
         </el-container>
       </div>
   </template>
   <script>
       export default {
           name: "Main"
       }
   </script>
   <style scoped lang="scss">
     .el-header {
       background-color: #B3C0D1;
       color: #333;
       line-height: 60px;
     }
     .el-aside {
       color: #333;
     }
   </style>
   

   修改index.js

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Main from "../views/Main";
   import Login from "../views/Login";
   import UserList from "../views/user/List";
   import UserProfile from "../views/user/Profile";
   Vue.use(VueRouter);
   export default new VueRouter({
     routes: [
       { 
           //主页
         path: '/main',
         component: Main,
         // 主页上的子路由 。
         children: [
           {
             path: '/user/profile',
             component: UserProfile,
           }, {
             path: '/user/list',
             component: UserList,
           },
         ]
       },
       //首页
       {
         path: '/login',
         component: Login
   
       },
     ]
   })
   

8. 页面间传递参数方法一

   {
   	path: '/user/profile/:id', //第一种方式路由中定义参数
   	name:'UserProfile', 
   	component: UserProfile
   }
   

   <router-link :to="{name:'UserProfile',params:{id:1}}">个人信息</router-link>
   

   <template>
     <!--从路由接收·参数并显示-->
     <div>
       <h1>个人信息</h1>
       {{$route.params.id}}
     </div>
   </template>
   
   

9. 页面间传递参数方法二

   {
   	path: '/user/profile/:id', 
   	name:'UserProfile', 
   	component: UserProfile, 
   	props: true	//开启props参数
   }
   
   

   <template>
     <div>
       个人信息
       {{ id }}
     </div>
   </template>
   <script>
       export default {
         props: ['id'], //通过组件传参
         name: "UserProfile"
       }
   </script>
   <style scoped>
   </style>
   

10. 重定向

    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome',//路径不同但指向同一个组件
      redirect: '/main'
    }
    

11. 路由模式

    export default new Router({
      mode: 'history',//去掉路径中的#
      routes: [
      ]
    });
    

12. 404界面

    <template>
        <div>
          <h1>404,你的页面走丢了</h1>
        </div>
    </template>
    <script>
        export default {
            name: "NotFound"
        }
    </script>
    <style scoped>
    </style>
    

    import NotFound from '../views/NotFound'
    {
       path: '*',
       component: NotFound
    }
    

13. 路由钩子

      export default {
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
          console.log("准备进入个人信息页");
          next();
        },
        beforeRouteLeave: (to, from, next) => {
          console.log("准备离开个人信息页");
          next();
        }
      }
    
    

14. 异步请求

    #安装axios
    cnpm install --save vue-axios
    

    //main.js导入
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios, axios)
    

    src/static/mock/data.json

    {"username":"root","password":"123456"}
    

      export default {
        props:['id'],
        name: "UserProfile",
        beforeRouteEnter: (to, from, next) => {
          console.log("进入路由之前")
          next(vm => {
            //进入路由之前执行getData方法
            vm.getData()
          });
        },
        beforeRouteLeave: (to, from, next) => {
          console.log("离开路由之前")
          next();
        },
    
        methods: {
          getData: function () {
            this.axios({
              method: 'get',
              url: 'http://localhost:8080/static/mock/data.json'
            }).then(function (response) {
              console.log(response)
            })
          }
        }
      }