前端路由简单使用——vue路由(一)

前言

所谓的路由是指在Web开发中URL到函数的映射，路由方式分为后端路由和后端路由。后端路由又称为服务器端路由，当服务器接收到客户端发来的HTTP请求，就会根据所请求的相应URL，找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端，页面渲染是在服务器端使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。前端路由的映射函数通常是进行一些DOM的显示和隐藏操作，当访问不同的路径的时候，会显示不同的页面组件。由于后端路由，加大服务器的压力，不利于用户体验，前端路由是目前流行的路由方式。前端路由的核心，就在于——改变视图的同时不会向后端发出请求，而是通过一个hash函数或者H5提供的history API来实现，前端路由不同的url对应不同的组件排列组合方式，在改变视图时不会向服务器后端发出URL请求重载页面。
Vue企业级前端开发框架是构建的SPA（单页面）应用，所有的vue文件是组成该单页面的组件，用户视图的改变，实质上是页面组件地址（URL）或组件排列组合方式改变。Vue-Router是vue官方提供使用的前端路由系统，对组件的URL实现统一的管理，用于设定访问路径，并建立起路径和组件的映射关系，简化组件之间的调用。

VUE前端路由模式

VUE前端路由模式主要应用的是HASH模式和HISTORY模式。VUE默认的前端路由模式是hash模式

1. HASH模式：这里的HASH不是指的HASH散列中的HASH，而是地址栏 URL 中的 “#” 符号，代表网页中的一个位置，“#”及其右边的部分叫做url锚部分。如：
   http://www.abc.com/#/hello，hash 值为 #/hello
   HASH模式的特点是锚部分虽然出现在地址栏中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。通过hash方法实现前端路实现原理是onhashchange事件，这个事件可以实时监听url中hash值的变化，由此来根据hash值的变化进行一些DOM的切换操作。存在问题，地址栏出现“#”不美观。
2. HISTORY模式： 利用了HTML5 History Interface中新增的pushState()和replaceState()方法。这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL，但浏览器不会即向后端发送请求。存在问题，不安全，前进、后退不存在问题，刷新页面时有可能向服务器发送请求，出现404错误。

VUE路由基本概念

1. Route：是一条独立路由，它是一个对象。主要由两个部分组成： path和component。其中path指路径，每个路由应该映射一个组件，component 指的是组件。代码如下：

   {
     path: '/views/modules/yc/datainfoList', 
     name:"datainfoList", //这里name可以省略，加上name后使用路由时直接使用
     component: datainfoList
   }

路由中增加name后，通过name属性，可以为一个页面中不同的router-view渲染不同的组件，也可以使用name传参。

<template>
  <div id="app">
     <router-view></router-view> //在此渲染这两个组件中其中一个
     <router-view  name="Hello">hello</router-view> //将渲染定义在route中的Hello组件
     <router-view  name="text"></router-view>   //将渲染定义在route中的text组件
  </div>
</template>

在定义一条路由时，还可以定义子路由（嵌套路由），使用关键字children完成，如下代码

   {  
      path: '/hello',  
      name: 'Hello',  
      component: Hello,  
      children: [  
        { path: 'hello1', component: Hello1 },  
        { path: 'hello2', component: Hello2 }  
      ]  
    }  

路由hello下，有两个子路由，分别是hello1、hello2.
2. routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。代码如下

const Routes = [{
    path: '/text/:id',
    component: text,
  },
  {
     path: '/views/modules/yc/datainfoList', 
     component: datainfoList
   }
]

上述示例中routes包含两条路由。

3. router：路由的管理者，也称路由器类。如果route是实体类，router就是对实体类的操作类。路由器类是一个全局的对象，包含了所有的路由包含了许多关键的对象和属性。是通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象。代码如下：

const router = new VueRouter({  
      mode: 'hash',    //路由采用hash模式
      routes: Routes   //Routes是定义的路由集合     
})

router提供的钩子函数，常用的有beforeEach、afterEach。router.beforeEach路由跳转前做一些验证，比如登录验证，router.afterEach，在路由跳转之后执行，可以完成进度条的加载工作
【示例】添加添加动态(菜单)路由，如果菜单的路由已经生成，直接访问，否则有后台获取菜单数据组成路由

router.beforeEach((to, from, next) => {
  if (router.options.isAddMenuRoutes) {
    next()
  } else {
    $api.getMeun({})
    .then(data => {
      if (data && data.code === 0) {
        //将菜单URL加入路由
        router.options.isAddMenuRoutes = true
        next({ ...to,
          replace: true
        })
      } else {
        next()
      }
    }).catch(e => {
      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
      router.push({
        name: 'login'
      })
    })
  }
})

路由的简单使用

【例】创建Home和about两个vue组件，并在路由中进行配置，完成页面中切换调用。

1. 安装vue-Router。Vue-Router在使用前必须安装，检查项目中的package.json文件，该文件中是否有Vue-Router，如果有说明已经安装，否则按照以下步骤完成安装。打开命令行终端，进入工程所在目录，输入执行npm install vue-router –S命令。完成后查看package.json文件的dependencies，出现"vue-router"表示安装成功
   
2. 新建views文件夹，并在该文件夹中新建Home.vue和About.vue文件，
   Home.vue代码如下

<template>
  <div>这是首页组件</div>
</template>
 
<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>
</style>

About.vue代码如下

<template>
 <div>这是关于我们组件</div>
</template>
 
<script>
  export default {
    name: "About"
  }
</script>
 
<style scoped>
</style>

3. 创建router.js文件，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
//将组件导入 
import Home  from '../components/Home.vue';
import About from '../components/About.vue';
 
Vue.use(router);
 
export default new Router({
  routes: [
    {
      path: '/Home',
      component:Home,
    }, 
    {
      path: '/AboutUs',
      component:AboutUs,
    },
    {
      path:'/',    //默认组件，同一级别下只能有一个，默认显示home组件
      redirect:'/Home'
    },
  ]
})

4. 在src根目录下找到main.js，将上述router注入到根实例中。代码如下：

	import Vue from 'vue'  
	import App from './App.vue'    
    // 引入路由，import router 的router 一定要小写， 不要写成Router, 否则报 can't match的报错   
	import router from "./router.js"   

	new Vue({  
	    el: '#app',  
	    router,  // 注入到根实例中  
	    render: h => h(App)  
	   })  

5. 路由使用，在app.vue文件中使用路由。完成路由注入后，可以使用标签和标签控制页面跳转。是视图标签，就是Vue-Router路由中指定的Vue组件替换到标签的位置；是导航标签，相当于Html中的链接。

<template>
  <div >
    <ul>
      <li>
        /*内置标签，渲染时渲染成a标签,点击时路由中的页面在<router-view>标签中渲染*/
        <router-link to="/home">首页</router-link>
      </li>
      <li>
        <router-link to="/about">关于我们</router-link>
      </li>
    </ul>
    <div style="float: left;clear: both;margin-top: 10px">
      <router-view></router-view>
      /*此处默认渲染router.js中的path为“/”的组件*/
    </div>
  </div>
</template>

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

<style scoped>
</style>

小结

Vue-Router是vue官方提供使用的前端路由系统，对组件的URL实现统一的管理，并建立起路径和组件的映射关系，简化组件之间的调用。route、routes及router分别代表路由、路由数组和对路由的管理和操作。