vue2.x：四、vue页面开发进阶版-路由之基础开发

注：本文皆为本人自己实际开发中的了解所得经验，如有不对之处欢迎诸位批评指点

vue页面开发进阶版-路由之基础开发

Vue 是一套用于构建用户界面的渐进式框架。
本教程均基于vue2.x的版本进行编写，搭建的脚手架是使用的@vue/cli 4，编译工具使用的是webStorm

1、vue路由基础开发

vue的路由就是在vue页面中进行跳转切换，因为vue项目在打包后只有一个index.html页面作为项目入口，其他页面的展示都是通过js实时渲染生成的所以出现多了vue页面的时候就需要使用路由进行切换跳转。

vue的路由的路由其实就是相当于一个组合组件，将每个页面当做一个组件来映射到路由中，然后通过切换不同的地址来通知路由窗口加载并渲染哪个页面。

vue-router 依赖包是vue官方支持的路由跳转包，推荐就使用这个包来进行vue路由跳转

1、引入依赖

vue-router 依赖包的引入可以直接使用命令进行引入

npm install -S vue-router

命令结束后，就会在package.json文件中多出一个vue-router的依赖

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.3.4"
  }

2、vue-router的简单配置

在当前项目下src目录里创建一个文件router并在其中创建一个js文件-index.js

在index.js中写入以下代码

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

Vue.use(VueRouter) //让vue加载vue-router组件

  const routes = [
  {
    path: '/', //路由的地址，也就是在浏览器地址栏显示的地址
    name: 'Home', //路由的名称
    component: Home //路由跳转的实际页面
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

//实例化VueRouter
const router = new VueRouter({
  mode: 'history', //路由页面应Url显示模式，有history和hash俩种模式，后面再将
  routes
})

// js文件导出router以方便main.js文件调用
export default router

完后我们要在main.js中导入这个配置并且配置在vue中

import router from './router'

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

这样就配置完成了，接下来我们详细描述一下router/index.js配置的过程。

在router/index.js文件中我们先是引入vue依赖和vue-router依赖，并将vue-router插件加载到vue全局中，以确保vue可以正常读取vue-router的配置并生效。

而const routes是用来定义一个只读的常量，这个常量中就是定义了我们项目中的路由表配置，最后使用这些配置将vue-router实例化后导出。

在路由表配置中的path、name、component这三个是必填项，并且path、name这俩个参数的值在同一层是不能有相同的，不然在后面配置的重复路由就不会生效直接跳过。

path是使用的正则匹配的，也就是说它对应的参并不是一个绝对的url，我们也可以写成是这个样子：

{
    path: '/about/*',
    name: 'About',
    component: () => import('../views/About.vue')
  }

这样的话我们凡是已/about/开头的url都会匹配到这个页面，这也就是说在路由表中所有URL匹配都是通过路由表中多个配置按照顺序取path使用正则的方式去匹配，这也就是为什么我在前面说的如果俩个路由配置的path相同的话，后面配的那个就会失效的原因。并且我们也可以在path中指定页面参数，这样访问指定路由的时候可以再url上携带参数用以在访问的路由页面中访问：

//配置的router
path: '/about/:id'
//访问的url
localhost:8080/about/1
// about页面中取值，在beforeCreate时候就能获取到
this.$route.params.id

//配置的router
path: '/about/:id/:name'
//访问的url
localhost:8080/about/1/admin
// about页面中取值，在beforeCreate时候就能获取到
this.$route.params.id === 1
this.$route.params.name === 'admin'

当然还有其他路由传值的方法，我们在后面讲解。

component是用来指定路由跳转的页面一共有俩种方法：

1. 直接引入

   import Home from '../views/Home.vue'
   
   component: Home
   

   这种方法引入的页面是在路由配置生效的时候就会加载并且凡是这样导入的页面在项目打包后都会将这些直接引入页面的内容都放到chunk-vendors的js文件中，好处是第一次加载会慢但是后续就快了，坏处就是这样直接引入的文件多了之后chunk-vendors.js文件也会越来越大，导致加载缓慢。

2. 按需引入

   component: () => import('../views/About.vue')
   

   路由的按需引入也就是路由懒加载，他会把这个页面单独生成一个js文件，在路由跳转到这个页面的时候vue才会去加载对应的js文件来渲染生成显示页面，通常生成的js文件都是“chunk-”开头的，当然如果你想修改生成的js文件名称或者是想让路由中的多个页面都生成到一个指定的js文件中可以再引入时加入注解/* webpackChunkName: "about" */ (需要 Webpack > 2.4)这样就可以将所有页面生成到about.js文件中，具体放的位置是：

   component: () => import(/* webpackChunkName: "about" */  '../views/About.vue')
   

   这样的话就是webpackChunkName一样的都会放置在一个js文件中。

在实例化VueRouter的时候，配置中有一个mode的配置，他的作用就是配置路由的模式，主要分为hash和history，他俩的区别就是——URL的美观，是的你没有看错就是url的美观，如果你使用的是hash的模式的话，项目运行起来访问路由是这个样子的：localhost:8080/#/about，他会在你启动地址端口后加上一个/#/，用来区分路由，也就是你在#的前面不论写什么，他都会显示正常的路由页面；如果你使用的是history模式，那么你的项目路由url显示就是正常的localhost:8080/about，但是这个模式有一个缺点，那就是如果你是在本地开发运行没问题，但是你是打包都部署的话就需要后台配置支持，不然的话除了首页localhost:8080/可以正常显示，其他页面都会返回404找不到页面，这里举一个nginx配置的例子：

location / {
	……
  try_files $uri $uri/ /index.html;
}

这样的话nginx就会将所有url的跳转变更都交由你的项目来管理。

3、vue-router的简单使用

在router配置完成后我们需要在app.vue中添加 <router-view/> 标签，所有router中配置的一级路由对应的页面都会在这里显示，我们可以简单写一下APP.vue的页面：

<template>
  <div id="app">
      <div id="nav">
          <router-link to="/">Home</router-link>
          <router-link to="/about">About</router-link>
      </div>
      <router-view/>
  </div>
</template>

这样点击不同的路由他的下发就会显示不同的页面，这个其实就像是HTML的<iframe>标签中间嵌套的是其他的页面，只不过vue这里是将指定页面渲染到了app.vue页面的<router-view/> 标签指定位置进行渲染显示。

通过上面的代码可以看出跳转路由并不是想普通的a标签一样跳转url而是使用了一个路由的自定义标签，所以我们接下来了解一下路由跳转的几种导航方式：

1. 编程式的导航
   编程式的导航就是可以在 Vue 实例内部的事件方法中通过 $router 访问路由实例,常用的访问（跳转）路由的方法有：push、replace、go、back、forward
   push：

   this.$router.push('/about')
   this.$router.push({path:'/about'})
   this.$router.push({name:'About'})
   

   上面这三种方式都可以进行访问指定路由，并且在我们项目中通常有一些需求是从这个页面跳转到下个页面需要传递一些参数我们可以使用下面两个方法进行访问传递：

   //1、 query 传参，相当于get请求，页面跳转时参数会在地址栏中显示，通过this.$route.query.id获取
   this.$router.push({ 
       path:'/about',
       query:{
           id:this.id
       }
   })
   //2、params 传参，相当于post请求，页面跳转时参数不会在地址栏中显示,通过this.$route.params.id获取
   this.$router.push({ 
       path:'/about',
       params:{
           id:this.id
       }
   })
   

   注：传参是 router，接收参数是 route

   replace：
   同样是跳转到指定的url，但是这个方法不会向路由记录（history）里面添加新的记录，而且将当强路由替换为新路由，也就是他并不是跳转到了一个新路由页面而是用指定的路由页面讲当前路由页面替换了，当返回上一步的时候是不会返回上一个页面而是上上个页面。

   go：
   相对于当前页面向前或向后跳转多少个页面，使用方法时this.$router.go(n)，这里的n时一个数字，可以是正也可以是负，会根据vue的路由记录前进或者后退
   back：
   路由访问回退，相当于this.$router.go(-1)
   forward：
   路由访问前进，相当于this.$router.go(1)

2. 声明式的导航
   声明式的导航就是使用<router-link> 标签来导航，跳转访问路由的示例：

   <router-link to="/about"></router-link>
   <router-link :to="path"></router-link>
   <router-link :to="{ name: 'About', params: { id: 1 }}"></router-link>
   

   <router-link> 标签属性to其实就是在vue内部编译为编程式的导航中的push，所以使用方法效果相同，以及<router-link> 标签属性replace 使用后就是将标签to译为编程式的导航中的replace，示例：

   <router-link :to="{ path: '/about'}" replace></router-link>