Vue03_Router路由、ElementUI和Axios的使用

落日映苍穹つ 2022-12-05 15:20 86阅读 0赞

**Vue03\_ Router路由、ElementUI 和 Axios 的使用**

--------------------

**安装vue-router**

npm install vue-router

**安装ElementUI**

npm i element-ui -S

**安装Axios**

npm install axios

**在Vue项目下创建router目录，在其中创建index.js文件：**

import Vue from 'vue'
    import VueRouter from 'vue-router'
    //引入组件
    import Content from "../components/Content";
    import Main from "../components/Main";
    import list from "../components/list";
    import Profile from "../components/Profile";
    import NotFound from "../components/NotFound";
    
    //声明使用路由
    Vue.use(VueRouter);
    
    //配置导出路由，编写路由参数：
    export default new VueRouter({ 
      routes:[
        { 
          path: '/content',
          component: Content,
          name: 'Content'
        },
        { 
          path: '/main',
          component: Main,
          name: 'Main',
          children: [
            { 
              path: '/user/list/:username',
              component: list,
              name: 'userlist',
              props: true
            },
            { 
              path: '/user/profile/:id',
              component: Profile,
              name: 'userProfile'
            },
            { 
              path: '/goHome',
              redirect: '/main'
            }
          ]
        },
        { 
          path: '*',
          component: NotFound
        },
        { 
          path: '/',
          redirect: '/main'
        }
      ]
    });

**在main.js中导入自定义的vue-router配置：**

import Vue from 'vue'
    import App from './App'
    
    //导入自定义的router配置：
    import router from "./router";
    
    //导入ElementUI:
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';
    
    //导入Axios:
    import axios from 'axios';
    import VueAxios from 'vue-axios';
    
    //声明使用ElementUI:
    Vue.use(ElementUI);
    
    //声明使用Axios
    Vue.use(VueAxios,axios);
    
    阻止vue在启动时生成生产提示：
    Vue.config.productionTip = false;
    
    new Vue({ 
      el: '#app',
      //将router挂载到Vue上：
      router,
      components: {  App },
      template: '<App/>'
    })

**在public目录下创建mock目录，在mock目录中创建data.json文件：**

{ 
      "name": "BLU",
      "url": "http://www.baidu.com",
      "page": 1,
      "address": { 
        "country": "China",
        "city": "南京",
        "street": "安德门大街"
      }
    }

**App.vue**

<template>
      <div id="app">
        <HelloWorld/>
        <router-link to="/main">首页</router-link>
        <router-link to="/content">内容页</router-link>
        <router-view></router-view>
      </div>
    </template>
    
    
    <script> import HelloWorld from "./components/HelloWorld"; export default { name: 'App', components: { HelloWorld } } </script>
    
    
    <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 60px; } </style>

**HelloWorld.vue**

<template>
      <div>
        <p>Hi BLU</p>
        <p>{
       {msg}}</p>
      </div>
    </template>
    
    
    <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>

**list.vue**

<template>
        <div>
            <h1>用户列表页</h1>
            {
       {username}}
        </div>
    </template>
    
    
    <script> export default { props: ['username'], name: "userlist" } </script>

**Profile.vue**

<template>
        <div>
            <h1>个人信息页</h1>
            {
       { $route.params.id }}
        </div>
    </template>
    
    
    <script> export default { name: "userProfile", beforeRouteEnter:(to, from, next)=>{ console.log("进入路由Profile"); next(vm => { vm.getData(); }); }, beforeRouteLeave:(to, from, next)=>{ console.log("离开路由Profile"); next(); }, methods: { getData: function () { this.axios({ method: 'get', url: 'http://localhost:8080/mock/data.json' }).then(function (response) { console.log(response); }) } } } </script>

**Main.vue**

<template>
        <el-container>
        	<el-aside width="480px">
            	<el-col :span="12">
               		<h5>默认颜色</h5>
                	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    	<el-submenu index="1">
                        	<template slot="title">
                            	<i class="el-icon-location"></i>
                            	<span>导航一</span>
                        	</template>
                        	<el-menu-item-group>
                            	<template slot="title">分组一</template>
                            	<el-menu-item index="1-1">
                                	<router-link :to="{name: 'userlist',params: {username: 'BLU'}}">用户列表页</router-link>
                            	</el-menu-item>
                            	<el-menu-item index="1-2">
                                	<router-link v-bind:to="{name: 'userProfile',params:{id: 1}}">个人信息页</router-link>
                            	</el-menu-item>
                            	<el-menu-item index="1-3">
                                	<router-link to="/goHome">回到首页</router-link>
                            	</el-menu-item>
                        	</el-menu-item-group>
                        	<el-menu-item-group title="分组二">
                            	<el-menu-item index="1-3">选项3</el-menu-item>
                        	</el-menu-item-group>
                        	<el-submenu index="1-4">
                            	<template slot="title">选项4</template>
                            	<el-menu-item index="1-4-1">选项1</el-menu-item>
                        	</el-submenu>
                    	</el-submenu>
                    	<el-menu-item index="2">
                        	<i class="el-icon-menu"></i>
                        	<span slot="title">导航二</span>
                    	</el-menu-item>
                    	<el-menu-item index="3" disabled>
                        	<i class="el-icon-document"></i>
                        	<span slot="title">导航三</span>
                    	</el-menu-item>
                    	<el-menu-item index="4">
                        	<i class="el-icon-setting"></i>
                        	<span slot="title">导航四</span>
                    	</el-menu-item>
                	</el-menu>
            	</el-col>
        	</el-aside>
        	<el-container>
            	<el-main>
                	<router-view></router-view>
            	</el-main>
        	</el-container>
    	</el-container>
    </template>
    
    
    <script> export default { name: "Main", methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); } } } </script>

**Content.vue**

<template>
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="ruleForm.age"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    
    <script> export default { name: "Content", data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm: { pass: '', checkPass: '', age: '' }, rules: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } } </script>

**NotFound.vue**

<template>
        <div>
            <h1>404：页面不存在</h1>
        </div>
    </template>
    
    <script> export default { name: "NotFound" } </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/76073d1a6d67497cbff686e11f72b127.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0710a2638b774583af47bb3823eff09e.png