Vue全家桶系列之Vue-router(二)

1.前言

上篇文章说下下两种路由各自的原理及优缺点，那么这篇文章来开始vue-router学习！

2.路由的使用步骤

1. 安装模块

npm install vue-router --save

2. 引入模块

import VueRouter from 'vue-router'

3. vue使用vue-router插件

Vue.use(VueRouter)

4. 创建路由实例对象

let vueRouter =new VueRouter({
   //配置参数..
})

5. 注入vueRouter参数

new Vue({
   vueRouter  //或者写全  vueRouter :vueRouter 
})

6. 告诉路由渲染的位置

<router-view></router-view>

3.一个最简单的路由例子

我们用之前vue-cli脚手架创建的项目来做例子，可以利用vue单文件组件来开发！首先先来看下入口文件main.js,里面导入vue,App是个单文件组件，router 是和路由相关的代码！

import Vue from 'vue'

import App from './App'  //import App from './App.vue'

import router from '@/router' // import router from 'src/router/index.js'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App />'
})

再来看下App.vue单文件组件，其实里面就只有个<router-view></router-view>，路由匹配到的组件将渲染在这里

<template>
  <div>
   <router-view></router-view>
  </div>
</template>

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

<style>
</style>

再来看下router里面index.js，这里主要是写了一些路由的配置相关代码,首先要必须先要导入VueRouter和vue ，要在vue上使用VueRouter插件，必须要vue.use(VueRouter),不要问为什么，因为插件都是这么玩的，然后还需要导入path匹配的组件（HelloWorld组件），所有的都准备就绪了，下面就需要配置路由信息了，因为VueRouter是个构造函数，所以必须要new出实例，参数是一个对象，对象的key是routes，注意了routes（不是routers,很容易写错），value就是路由匹配配置了，它是个数组（包含多个路由匹配配置），这里只有一个，path是匹配的路径，'/' 是根目录的意思，component是配置的组件，所以根目录就匹配到HelloWorld组件！

import VueRouter from 'vue-router'

import Vue from 'vue'

import HelloWorld from '@/components/HelloWorld'

Vue.use(VueRouter)

/* eslint-disable no-new */
let vueRouter = new VueRouter({
  routes: [{
    path: '/',
    component: HelloWorld
  }]
})

export default vueRouter

最后来看下HelloWorld组件，其实就一个div,所以直接把这个div会渲染到上面的App.vue中<router-view></router-view>上，就这么简单！

<template>
  <div>HelloWorld组件</div>
</template>

<script>
export default {
  name: "HelloWorld"
}
</script>
<style>
</style>

我们执行 npm run dev就可以看到路由匹配到的HelloWorld组件就渲染到页面上！路由默认是hash模式，所以url里面会有#号

我们来改下路由的模式，找到router里面的index.js文件添加history模式

import VueRouter from 'vue-router'

import Vue from 'vue'

import HelloWorld from '@/components/HelloWorld'

Vue.use(VueRouter)

/* eslint-disable no-new */
let vueRouter = new VueRouter({
  mode: 'history', //使用history模式
  routes: [{
    path: '/',
    component: HelloWorld
  }]
})

export default vueRouter

再来看下url地址，没有#号了！就是这么简单！

我们再来把例子升级一下，假如有3个页面（首页home,帮助页面help,联系我们页面contact us），我们需要点击不用的标签进入到不同的页面上，并且最开始进来是首页的样式！需要点击，那么我们肯定会想到点击元素，这里我们使用3个a标签！修改App.vue文件(由于只是演示，所以style样式我去掉了)

<template>
  <div>
    <a href="/home">home页面</a>
    <a href="/contactUs">contact us页面</a>
    <a href="/help">help页面</a>
    <router-view></router-view>
  </div>
</template>

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

有个不同的路径，所有我们需要创建不同的组件去匹配这些路径！下面我只展示添加一个Home组件的代码,其他的都是类似的！

<template>
  <div>
    home
  </div>
</template>

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

接下来我们来修改路由的配置，找到router里面的index.js文件，把对应的path和组件匹配上, 其实name就相当于给你的path取个别名，方便使用，路由并不是一定要设置name值。（如果不设置name，vue-router默认name值为 default,后面会做到name的作用）

import Vue from 'vue'
import Router from 'vue-router'
import contactUs from '@/components/contactUs'
import Help from '@/components/Help'
import Home from '@/components/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/contact us',
      name: '/contactUs',
      component: contactUs
    },
    {
      path: '/help',
      name: 'help',
      component: Help
    }
  ]
})

我们再来看下运行结果

你仔细看到动画的最后，鼠标放到圆形的箭头上，显示"重新加载此页"，前面每次点击你可以很清楚的发现那个圆形箭头每次都闪了下（页面刷新了），不是history不刷新页面吗？这里确实是每次点击都刷新了页面，是因为我用的是a标签，每次点击都会触发它的默认事件，所以之前演示history原理的时候我阻止了a标签的默认事件，每次都要阻止了a标签的默认事件很麻烦，所有vue-router就帮我们做了这个事件，把a标签换成< router-link >标签，修改App.vue文件如下：

<template>
  <div>
    <router-link to="/home">home页面</router-link>
    <router-link to="/about">about页面</router-link>
    <router-link to="/help">help页面</router-link>
    <!-- <a href="/home">home页面</a>
    <a href="/about">about页面</a>
    <a href="/help">help页面</a> -->
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
}

to后面接的是路径，也可以接一个对象（后面会说到），再来看运行的结果，圆形的箭头就不会闪动了（页面不再刷新了）