vue-router(路由)快速入门 浅析（适合vue小白）

首先，由于博主学到vue的路由时是基于vue-cli3.0和webpack打包器进行开发的，所以，菜鸟教程和一些官方教程的案例好像并不适合(可能是自己刚学皮毛理解不够深)，所以，博主进行了各种查阅，总算写出一个小案例，总结出如下知识点：
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

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

对于以上的几点，博主目前只掌握了路由的配置，不过仅通过这个，也认为用 通过Vue.js + Vue Router 创建单页应用，是非常方便的。

话不多说，先上一个如何通过vue-cli和webpack配置路由的案例。

传统的配置方法

当用vue-cli3.0和webpack生成一个项目时，会有一个router.js文件，咋们的全局路由就在这里配置

router.js(可以在这里配置hash模式(默认)或者history模式 通过mode:'history'命令)

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import first from './views/first.vue'
import second from './views/second.vue'
import About from './views/About.vue'
import test from './views/test.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/test',
      name: 'test',
      component:test,
      children:[
        {
          path :'/',
          name :'first',
          component:first
        },
        {
          path: '/second',
          name: 'second',
          component: second
        }
      ]
    }
  ]
})

Vue-Router + Webpack 路由懒加载方法

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      //路由懒加载
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
      // component: About
    },
    {
      path: '/test',
      name: 'test',
      component:() => import('./views/test.vue'),
      // component:test,
      children:[
        {
          path :'/',
          name :'first',
          component:() => import('./views/first.vue') 
          // component:first
        },
        {
          path: '/second',
          name: 'second',
          component: ()=> import('./views/second.vue')
          // component: second
        }
      ]
    }
    
  ]
})

关于路由懒加载可以点击下方链接了解详情
https://blog.csdn.net/sinat_17775997/article/details/81475522

其中test组件下面的children路由是为了实现在test.vue组件中做到组件内更换的效果，即在test的路由中添加了两个子路由，为了方便，就没有把它单独提出来讲了，这里first的路由是”/”，代表的是打开时默认会加载first这个组件，上面的Home路由配置也是同样的原因。

**除此之外，我们需要建立路由对应的Page页面的vue文件，否则cmd会报错。**博主这里把它们和其他组件一起放在views目录下了，这个位置可以随便放，只要能找的到。
ex：

first.vue

<template>
  <div><h1>this is test's first page</h1></div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
}
</script>
<style lang='scss' scoped>
</style>

在这些都配置完成之后，我们就可以在App.vue(可以看做是项目的入口文件，在main.js中定义啦**)和test.vue中配置相应的导航啦.

App.vue

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

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

test.vue

<template>
  <div>this is a test vue page
      <div>
          <router-link to="/test">first page</router-link> |
          <router-link to="/second">second page</router-link>
          <!-- 必须添加 -->
          <router-view/>
          <a href="http://localhost:8080/#/second">SecondPage</a>
      </div>
      
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
}
</script>
<style lang='scss' scoped>
</style>

简单的路由配置就已经完成，之后在当前目录下通过npm run serve就可以查看效果啦：

从上面可以看见，点击路由的时候只是内容变了，导航并没有改变，一个简单的多视图的单页Web应用就建好啦，是不是很方便很好用呢？

最后博主再把博主的目录结构发出来

接下来博主再补充几点基础知识：

router-link

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名(active-class)。

简单来说，<router-link to='/home'>文字</router-link>该标签代表点击’文字‘显示指定路径的组件

<router-link> 比起写死的 <a href="..."> 会好一些，理由如下：

• 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。

• 在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。

• 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写 (基路径) 了。

router-view

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件，是显示路由的一个入口，即上面router-link指向的组件在此处显示

主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。

从解释上可以看出，这个组件在使用路由时是必须写的，因为它是渲染组件的，之前博主就因为没写这个而找了很久的bug（表示心力憔悴的同时对自己很无语）

关于vue-router的更多知识，查阅官方文档，博主所写全是皮毛。

 
 
博文持续更新，若有问题可联系博主，感谢

博文参考
https://blog.csdn.net/Joshua_HIT/article/details/59635160