Vue进阶2<----->表单、ajax、路由、ElementUI、webpack...

五、 webpack-Vue 工程项目

1.创建工程

使用 NPM 安装相关组件依赖时可能会遇到权限问题，此时使用 PowerShell 管理员模式运行即可；开始菜单 -> 鼠标右击 -> Windows PowerShell (管理员)

创建一个名为 hello-vue 的工程

# 使用 webpack 打包工具初始化一个名为 hello-vue 的工程
vue init webpack hello-vue

2.安装依赖

我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装 SASS 加载器
npm install sass-loader node-sass --save-dev

# 安装依赖
npm install

3.启动工程

npm run dev

4.运行效果

在浏览器打开 http://localhost:8080你会看到如下效果

附：NPM 相关命令说明

• npm install moduleName：安装模块到项目目录下
• npm install -g moduleName：-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置
• npm install -save moduleName：--save 的意思是将模块安装到项目目录下，并在 package 文件的 dependencies 节点写入依赖，-S 为该命令的缩写
• npm install -save-dev moduleName：--save-dev 的意思是将模块安装到项目目录下，并在 package 文件的 devDependencies 节点写入依赖，-D 为该命令的缩写

六、使用ElementUI 制作登录页

1.目录结构

在源码目录中创建如下结构：

• assets：用于存放资源文件
• components：用于存放 Vue 功能组件
• views：用于存放 Vue 视图组件
• router：用于存放 vue-router 配置

2.创建视图

1）创建首页视图

在 views 目录下创建一个名为 Main.vue 的视图组件；该组件在当前章节无任何作用，主要用于登录后展示登录成功的跳转效果；

2）创建登录页视图

在 views 目录下创建一个名为 Login.vue 的视图组件，其中 el-* 的元素为 ElementUI 组件；

3.创建路由

在 router 目录下创建一个名为 index.js 的 vue-router 路由配置文件

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
    }
  ]
});

4.配置路由

修改 main.js 入口代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'

// 导入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'

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

// 安装 ElementUI
Vue.use(ElementUI);

new Vue({
  el: '#app',
  // 启用路由
  router,
  // 启用 ElementUI
  render: h => h(App)
});

修改 App.vue 组件代码

七、配置嵌套路由

1.什么是嵌套路由

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

2.创建嵌套视图组件

1）用户信息组件

在 views/user 目录下创建一个名为 Profile.vue 的视图组件；该组件在当前章节无任何作用，主要用于展示嵌套效果；

2）用户列表组件

在 views/user 目录下创建一个名为 List.vue 的视图组件；该组件在当前章节无任何作用，主要用于展示嵌套效果；

3.配置嵌套路由

修改 router 目录下的 index.js 路由配置文件，代码如下：

import Vue from 'vue'
import Router from 'vue-router'

import Login from "../views/Login"
import Main from '../views/Main'

// 用于嵌套的路由组件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

export default new Router({
  routes: [
    {
      // 登录页
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      // 首页
      path: '/main',
      name: 'Main',
      component: Main,
      // 配置嵌套路由
      children: [
        {path: '/user/profile', component: UserProfile},
        {path: '/user/list', component: UserList},
      ]
    }
  ]
});

说明：主要在路由配置中增加了 children 数组配置，用于在该组件下设置嵌套路由

4.修改首页视图

接着上一节的代码，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

说明：

• 在 元素中配置了 用于展示嵌套路由
• 主要使用 个人信息 展示嵌套路由内容

八、组件重定向

重定向的意思大家都明白，但 Vue 中的重定向是作用在路径不同但组件相同的情况下

1.配置重定向

1）修改路由配置

{
    path: '/main',
    name: 'Main',
    component: Main
},
{
    path: '/goHome',
    redirect: '/main'
}

说明：这里定义了两个路径，一个是 /main ，一个是 /goHome，其中 /goHome 重定向到了 /main 路径，由此可以看出重定向不需要定义组件；

2）重定向到组件

设置对应路径即可

回到首页

2.带参数的重定向

1）修改路由配置

    {
      // 首页
      path: '/main/:username',
      name: 'Main',
      component: Main
    },
    {
      path: '/goHome/:username',
      redirect: '/main/:username'
    }

2）重定向到组件

回到首页

九、参数传递

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。此时我们就需要传递参数了；

1.使用路径匹配的方式

1）修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}

说明：主要是在 path 属性中增加了 :id 这样的占位符

2）传递参数

（1）router-link

个人信息

说明：此时我们将 to 改为了 :to，是为了将这一属性当成对象使用，注意 router-link 中的 name 属性名称 一定要和 路由中的 name 属性名称 匹配，因为这样 Vue 才能找到对应的路由路径；

（2）代码方式

this.$router.push({ name: 'UserProfile', params: {id: 1}});

3）接收参数

在目标组件中使用

{{ $route.params.id }}

来接收参数

2.使用 props 的方式

1）修改路由配置

{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}

说明：主要增加了 props: true 属性

2）传递参数

同上

3）接收参数

为目标组件增加 props 属性，代码如下：

  export default {
    props: ['id'],
    name: "UserProfile"
  }

模板中使用

{{ id }}

接收参数

七、路由钩子与异步请求

1.路由中的钩子函数

• beforeRouteEnter：在进入路由前执行
• beforeRouteLeave：在离开路由前执行

案例代码如下：

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

参数说明：

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
  • next() 跳入下一个页面
  • next('/path') 改变路由的跳转方向，使其跳到另一个路由
  • next(false) 返回原来的页面
  • next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

2.在钩子函数中使用异步请求

安装 Axios

npm install axios -s

引用 Axios

import axios from 'axios'
Vue.prototype.axios = axios;

在 beforeRouteEnter 中进行异步请求，案例代码如下：

  export default {
    props: ['id'],
    name: "UserProfile",
    beforeRouteEnter: (to, from, next) => {
      console.log("准备进入个人信息页");
      // 注意，一定要在 next 中请求，因为该方法调用时 Vue 实例还没有创建，此时无法获取到 this 对象，在这里使用官方提供的回调函数拿到当前实例
      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);
        });
      }
    }
  }