十八、vue-router路由

1. 什么是vue-router

Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为

2. 安装

先查看node_modules中是否存在 vue-router。

vue-router是一个插件包，所以我们还是需要用 npm或cnpm 来进行安装的：

npm install vue-router --save-dev

安装完之后去node_modules路径看看是否有vue-router信息，有的话则表明安装成功。

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

3. 实例demo

项目文件夹中主要存在三个文件：

./src/App.vue
./src/main.js
./index.html

这三个文件的关系是 index.html 调用main.js 调用App.vue。

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>myvue</title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">

  </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>

在main.js中导入vue-router路由插件：

// 导入路由插件
import VueRouter from 'vue-router'

在main.js中显示声明使用VueRouter：

//显示声明使用vue-router路由
Vue.use(VueRouter)

components目录下，定义一个Content组件和Main组件：

Content组件：

<template>
  <div>
    <h1>内容页</h1>
    <h3>学科</h3>
    <ul>
      <li>Linux</li>
      <li>Java</li>
      <li>Vue</li>
    </ul>
    <h3>怎么学</h3>
    <ol>
      <li>看文档</li>
      <li>看视频</li>
      <li>做笔记</li>
    </ol>
  </div>
</template>

<script>
  export default {
    name: "Content"
  }

</script>

<style scoped>

</style>

Main组件：

<template>
  <div>
    <h1>个人介绍</h1>
    <ul>
      个人主页:
      <a href="http://melodyhub.ltd">melodyhub.ltd</a>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "Main"
  }

</script>

<style scoped>

</style>

创建src/router目录，专门存放路由。
创建src/router/index.js主配置文件：

index.js：Vue官方命名规则，主配置文件，实现全局配置
- path：路由路径,类似Spring中的@RequestMapping
- name：路由名称
- component：跳转到组件

import Vue from 'vue';
//导入路由插件
import VueRouter from 'vue-router';
//导入自定义组件
import Content from '../components/Content.vue';
import Main from '../components/Main.vue';

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径,类似Spring中的@RequestMapping
      path: "/content",
      //路由名称
      name: "content",
      //跳转到组件
      component: Content,

    }, {
      //路由路径
      path: "/main",
      //路由名称
      name: "main",
      //跳转到组件
      component: Main,
    }
  ]
})

第6步只是配置了路由，但未启用路由，在main.js中启用上述配置的路由：

router：全局唯一
通过router/index.js主配置文件，实现全局配置

import Vue from 'vue'
import App from './App.vue'

//导入路由配置目录,自动扫描里面的路由配置
import router from './router'

//来关闭生产模式下给出的提示
Vue.config.productionTip = false

new Vue({
  //配置路由
  router,
  render: h => h(App),
}).$mount('#app')

在App.vue中使用路由：

<template>
  <div id="app">
  <h1>vue-router Demo</h1>
    <router-link to="/main">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <!-- 控制路由页面展示 -->
    <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>

运行npm run dev，测试、查看效果。

十九、Element UI

1. 什么是Element

Element 是饿了么前端开源维护的 Vue UI 组件库，组件齐全，基本涵盖后台所需的所有组件，文档讲解详细，例子也很丰富。主要用于开发 PC 端的页面，是一个质量比较高的 Vue UI 组件库。

官网地址
Github：vue-element-admin

备注：属于前端主流框架，选型时可以考虑使用，主要特点是桌面端支持较多

2. 实战

创建一个工程vue-element：

vue init webpack vue-element

安装依赖，需要4个插件，分别为： vue-router、element-ui、sass-loader 和node-sass ：

# 进入工程目录
cd vue-element
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装 SASS 加载器,直接一句命令安装两个依赖插件
npm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

npm 命令解释：

npm install moduleName：安装模块到项目目录下

npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘的哪个位置，要看 npm config prefix的位置

npm install moduleName -save：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写

npm install moduleName -save-dev：–save-dev的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写

删除assets、components中的文件，并创建文件夹view、router分别存放视图、路由。
在views中创建Main.vue：

<template>
  <h1>首页</h1>
</template>

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

<style>

</style>

在views中创建Login.vue：

<template>
  <div>
    <!--el-form一个表单，两个输入框-->
    <el-form ref="loginForm" :model="form" :rules="rules"  label-width="80px" class="login-box">
      <center><h3 class="login-title">欢迎登陆</h3></center>
      <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>
        <!--登陆按钮绑定了一个onSubmit事件-->
        <el-button type="primary" v-on:click="onSubmit('loginForm')">登陆</el-button>
      </el-form-item>
    </el-form>
    <!--提示窗-->
    <el-dialog
      title="温馨提示"
      :visible.sync="dialogVisible"
      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:'密码不可为空',trigger:'blur'}
          ]
        },

        // 对话框显示和隐藏
        dialogVisible:false

      }
    },
    methods:{
      onSubmit(formName){
        // 为表单绑定验证功能
        this.$refs[formName].validate((valid)=>{
          if(valid){
            /*使用 vue-router 路由到指定页面,如果引用成功了,会去router中push到main，这种方式称为编程式导航*/
            this.$router.push("/main");
          }else {
            this.dialogVisible=true;
            return false;

          }
        });
      }
    }
  }
</script>

<style 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>

在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
    },
  ]
})

在main.js中导入相关配置：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
//扫描路由配置
import router from "./router"
//导入Element UI
import ElementUI from "element-ui"
//导入element css,样式文件需要单独引入
import 'element-ui/lib/theme-chalk/index.css'
//使用
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.config.productionTip = false

new Vue({
  //el: '#app', //同.$mount('#app')
  //配置路由
  router,
  render: h => h(App),//ElementUI规定这样使用
}).$mount('#app')

在App.vue中使用路由并展示视图：

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/login">注册</router-link>

    <!--展示视图-->
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    name: 'App',
  }
</script>

运行测试 http://localhost:8080/#/login ：

npm run dev

如果出现错误: 可能是因为sass-loader的版本导致的编译错误，可以切换到当前最高版本10.0.3，或尝试退回到7.3.1 ：

去package.json文件里面的"sass-loader"的版本更换成10.0.3，然后重新npm install就可以了。

Vue快速入门学习笔记（五）