[JavaScript知识库]Vue学习笔记（2）

Vue学习笔记（2）

再次强调的vue只关注视图层

使用vue-router

vue-router的主要作用就是页面跳转
安装的命令：

npm install vue-router --save-dev

下面是的vue-router的演示

一共四个文件：
Content.vue组件

<template>
  <div>
    我是内容页
  </div>
</template>

<script>
  //组件也要暴露出去
  export default {
    name: 'Content',
  }
</script>

<style>
</style>

index.js路由跳转配置文件

import Vue from 'vue'
import Router from 'vue-router'
import Content from '../components/Content.vue'

//使用router
Vue.use(Router);


//将模块暴露出去，其他模块才能使用
export default new Router({
    //路由可以多个，所以它是一个数组
    routes:[{
      //路由跳转路径
      path:'/content',
      //路由的名字
      name:'Content',
      //需要跳转到的组件，需要import导入组件
      component: Content
    }]
})

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 VueRouter from 'vue-router'
//导包导到的router目录就行了，会将这个包下面的所有文件导出来
import router from './router/index.js'


//使用vue-router
Vue.use(VueRouter);


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //需要将路由配置放入到main.js文件中
  router,
  components: { App },
  template: '<App/>'
})

最后是app.vue组件：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to="/">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!--将路由放到相应的位置上-->
    <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>

vue集成element-ui

element-ui集成命令：

npm i element-ui -S

后面需要写一些css样式，为了加速，需要安装SaaS加速

npm install sass-loader@7.3.1 node-sass --save-dev

vue集成element-ui的小例子：登录页面

在mian.js中引入element-ui：

// 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 VueRouter from 'vue-router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//导入vue-router才能使用
Vue.use(VueRouter);
//显式地使用ElementUI
Vue.use(ElementUI);


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //相当于ElementUI的初始化
  render: h => h(App)
})

写登入页面组件Login.vue

<template>
  <div>
    <el-form ref="form" :model="form" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号">
        <el-input type="text" placeholder="请输入用户名" v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="密码">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        form: {
          name: '',
          password: ''
        }
      }
    },
    methods: {
      onSubmit() {
        this.$router.push("/main");
      }
    }
  }
</script>

<style lang="css" scoped>
  .login-box {
    width: 350px;
    margin: 120px auto;
    border: 1px solid #DCDFE6;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 30px #DCDFE6;
  }
  .login-title{
    text-align: center;
  }
</style>

配置的路由文件index.js

import Vue from 'vue'
import Router from 'vue-router'
//导入登录页
import Login from '../views/Login'
import Main from '../views/Main'

Vue.use(Router);

export default new Router({
  routes: [
    {
      //登录页的路由地址
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main',
      name: 'Main',
      component: Main
    }
  ]
})

在定义一个模拟首页Main.vue

<template>
  <div>
    我是首页
  </div>
</template>

<script>
  export default{
    name: 'Main'
  }
</script>

<style>
</style>

参数传递

参数传递有两种方式：
第一种：
先配置index.js路由配置文件：

import Vue from 'vue'
import Router from 'vue-router'
//导入登录页
import Login from '../views/Login'
import Main from '../views/Main'
import MemberList from '../views/Member/MemberList.vue'
import MemberLevel from '../views/Member/MemberLevel.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      //登录页的路由地址
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main',
      name: 'Main',
      component: Main,
      //配置嵌套的子路由
      children: [
        {
          //会员列表
          path:'/member/list',
          name: 'MemberList',
          component: MemberList
        },
        {
          //会员等级
          path:'/member/level/:id',
          name: 'MemberLevel',
          component: MemberLevel
        }
      ]
    }
  ]
})

再配置的main.vue模块文件

<el-submenu index="1">
             <template slot="title"><i class="el-icon-message"></i>会员管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--使用:to变成对象，name是index.js配置的路由, params是对应可变参数-->
                <router-link :to="{name:'MemberLevel', params:{id:2}}">会员等级</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/member/list">会员列表</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>

第二种方式
先配置index.js路由配置文件：

import Vue from 'vue'
import Router from 'vue-router'
//导入登录页
import Login from '../views/Login'
import Main from '../views/Main'
import MemberList from '../views/Member/MemberList.vue'
import MemberLevel from '../views/Member/MemberLevel.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      //登录页的路由地址
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main',
      name: 'Main',
      component: Main,
      //配置嵌套的子路由
      children: [
        {
          //会员列表
          path:'/member/list',
          name: 'MemberList',
          component: MemberList
        },
        {
          //会员等级
          path:'/member/level/:id',
          name: 'MemberLevel',
          component: MemberLevel,
          //使用props传递参数，我们就要加上这个参数
          props:true
        }
      ]
    }
  ]
})

写MemberLevel.vue模块文件

<template>
  <div>
     <!--$route.params这个是固定的写法，这里的id是我们在index.js路由文件里面定义好的-->
     会员等级 ID={{id}}
  </div>
</template>

<script>
  export default{
    props:['id'],
    name: 'MemberLevel'
  }
</script>

<style>
</style>

不同页面的参数传递：

以登录为示例，登录账号传递到的登录页的首页那里

写一个登录页Login.vue：
下面的是部分代码，也是重要部分的代码

methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //如果验证通过，我们就进行跳转,这里的name是上面data里面form的name,因为视图和数据双向绑定了噶,前面的name是的参数的名字
            this.$router.push({name:'Main', params:{name:this.form.name}});
          } else {
            this.$message({
              message: '用户名或密码错误',
              type: 'warning'
            });
            return false;
          }
        })
      }

主页的代码Main.vue:
部分必要的代码：

 <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>
          <span>{{$route.params.name}}</span>
        </el-header>

路由模式和处理404

配置历史模式，url地址栏中不存在#，之前的是hash模式

export default new Router({
  mode:'history',
  routes: [
    {
      //登录页的路由地址
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main/:name',
      name: 'Main',
      component: Main,
      //配置嵌套的子路由
      children: [
        {
          //会员列表
          path:'/member/list',
          name: 'MemberList',
          component: MemberList
        },
        {
          //会员等级
          path:'/member/level/:id',
          name: 'MemberLevel',
          component: MemberLevel,
          //使用props传递参数，我们就要加上这个参数
          props:true
        },
        {
          path:'/goMain/:name',
          redirect:'/main/:name'
        }
      ]
    }
  ]
})

处理404的方式

   {
      path:'*',
      component: NotFound
    }

路由钩子函数发起异步请求

<script>
  export default{
    props:['id'],
    name: 'MemberLevel',
    beforeRouteEnter:(to, from, next) =>{
      console.log("进入会员等级页面");
      //next表示到下一个钩子函数，类似拦截器
      next(vm =>{
        vm.getData();
      });
    },
    beforeRouteLeave:(to, from, next) => {
      console.log("离开会员等级页面");
      next();
    },
    methods:{
      getData:function(){
        this.axios({
          method:'get',
          url:'http://localhost:8080/data.json',
        }).then(function(repos){
          console.log(repos);
        }).catch(function(error){
          console.log(error);
        });
      }
    }
  }
</script>