Vue Router 的基本使用

Vue Router 的作用

vue-router可以通过html5的history API或者hash实现单页应用，即不刷新跳转，切换地址，只是页面上的组件的切换；
vue-router可以实现页面间传参等其他功能；

单页应用的优缺点

优点：
无刷新体验,提升了用户体验；
完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
API 共享，如果你的服务是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量。容易变化的 UI 部分都已经前置到了多端，只受到业务数据模型影响的 API，更容易稳定下来，便于提供稳定的服务；
组件共享，在某些对性能体验要求不高的场景，或者产品处于快速试错阶段，借助于一些技术（Hybrid、React Native），可以在多端共享组件，便于产品的快速迭代，节约资源。
缺点：
首次加载大量资源，要在一个页面上为用户提供产品的所有功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长；
较高的前端开发门槛，MVC 前置，对前端工程师的要求提高了，不再是『切切图，画画页面这么简单』；同时工作量也会增加数倍，开发这类应用前端工程师的数量往往多于后端；
不利于 SEO，单页页面，数据在前端渲染，就意味着没有 SEO，或者需要使用变通的方案。

讲完了Vue Router 的作用和优缺点，我们进入正题。

Vue Router 入门

我这里使用vue-cli脚手架 生成vue-router
vue-cli脚手架会生成一个配置路由的文件
我们进入src下面的router文件夹的index.js来配置
首先我们导入vue-router

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

再导入模板

import HelloWorld from '@/components/HelloWorld.vue'
import test from '@/components/test.vue'   

test是我们新定义的变量，from后面是路径

我们开始配置路径

export default new Router({
  routes: [                       //配置路由
    {                             //每一个链接是一个对象
      path: '/',                  //链接路径
      name: 'HelloWorld',         //路由的名称
      component: HelloWorld       //对应路由的模板
    },
    {
      path: '/test',
      name: 'test',
      component: test,
      }
   ]
})

在要使用的组件中

<router-link to="/">首页</router-link>
    <router-link to="/test">第二页</router-link>
    <router-view/>        <!--显示路由的内容-->

这样就能实现简单的路由切换，看起来像tab切换，其实是单页面，实现局部刷新。

接下来，我们开始深入使用Vue Router

配置子路由（嵌入路由）

在之前配置路由的文件下的inedx中
我们首先先导入模板与路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld.vue'
import test from '@/components/test.vue'
import test1 from '@/components/test1.vue'
import test2 from '@/components/test2.vue'

我们使用Vue Router

Vue.use(Router)

接下来开始配置了

export default new Router({
  routes: [                       //配置路由
    {                             //每一个链接是一个对象
      path: '/',                  //链接路径
      name: 'HelloWorld',         //路由的名称
      component: HelloWorld       //对应路由的模板
    },
    {
      path: '/test',               //第二个路由
      name: 'test',
      component: test,
      children:[
        {
          path: 'test1',
          name: 'test1',
          component: test1,
        },
        {
          path: 'test2',
          name: 'test2',
          component: test2,
        }
      ]
    }


  ]
})

在我们要用的组件中引用
例如，在test.vue中

<template>
  <div>
    <p>test</p>
    <router-link to="/test/test1">test1</router-link>
    <router-link to="/test/test2">test2</router-link>
    <router-view></router-view>
  </div>

</template>

Vue Router 的基本使用已经结束了，下次总结一下Vue Router 传参博客。