路由的使用

之前我们的vue应用都是只有一个视图，但是一般的应用不止一个视图。于是乎就有了路由，路由可以很方便的帮我们切换视图，而且在视图切换过程没有浏览器刷新，体验比较好。

基本使用

我们通过一个简单的例子来演示，在写代码之前，我们需要安装下路由组件，路由组件由vue官方提供，在my-project目录下执行命令yarn add vue-router 等待完成。

  • 修改App.vue 
<template>
    <router-view/>
</template>

<script>
    export default {
    }
</script
  • 在src文件夹下新建一个views文件夹
  • 在views文件夹下新建test1.vue文件和test2.vue

.vue后缀的文件就是vue的组件，视图本质上也是组件，只是人为划分的。

test1.vue

<template>
  <div>test1</div>
</template>

<script>
   export default {
   }
</script>

test2.vue

<template>
  <div>test2</div>
</template>

<script>
   export default {
   }
</script>
  • 在src文件夹下新建一个router.js文件

现在我们来使用router实现test1和test2的切换。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('@/App'),
            children:[
                {
                    path: '/view1',
                    name: 'view1',
                    component: () => import('@/views/test1'),
                },
                {
                    path: '/view2',
                    name: 'view2',
                    component: () => import('@/views/test2'),
                }
            ]
        }
    ]
})

刷新页面，我们发现一片空白，那是因为默认路由到/路径，现在我们在浏览器地址栏输入http://localhost:8080/#/view1，我们发现页面输出了test1，如果把view1改成view2，输出test2，这就是刚才我们写的那2个视图组件。 如果你希望一进入页面就跳转到view1，可以加个重定向：

component: () => import('@/App'),
redirect:'/view1',//重定向到某个路径

由于我们的代码越来越长了，后面的贴出的代码会使用局部代码。

通过代码和a标签来切换路由

刚才我们只是通过浏览器的地址栏来切换视图，但是实际开发往往需要使用代码来切换。

  • 通过代码切换

我们可以通过调用代码router.push方法来切换。我们可以在点击事件内这样写：

this.$router.push('/view2')

或者

this.$router.push({path:'/view2'})

使用代码切换的场景还是非常多，比如登录。有时候我们无法直接获取到this指针，比如在echarts的一些方法内无法直接获取vue实例，那么难道就没办法了吗，可以试试直接在当前组件内引入vue,import Vue from 'vue'，然后通过Vue.$router.push()一样能调用，这是因为我们在main.js中初始化vue实例的时候把路由组件塞进了vue实例的根节点。

  • 通过超链接跳转

利用超链接也能实现切换。注意：有时候会出现点击无效。

通过query参数传递

有了路由切换，那肯定少不了视图之间的参数传递。我们先来介绍如何使用query来传参，query参数的形式：param1=value&param2=value。这种参数传递的方式，不需要修改任何路由，直接通过以下方式带上即可：

  • url后面带上参数，例:http://127.0.0.1/#/?id=1
  • 编码方式传递，就是在调用this.$router.push({path:'/view2'})的时候带上，代码变成:this.$router.push({path:'/view2',query:{id:1,age:10,name:'张珊'}})

参数传递过去之后，我们还要接收，由于我们在vue框架中开发，我们应该使用vue的方式来获取参数，当然原生js也能获取，但是不太优雅。获取方式：this.$route.query.参数名。在你需要获取参数的组件中调用就可以了。

通过path传输传递

query传递参数其实能满足大部分需求，但是为了url美观一点或者其他原因，我们希望把一些参数嵌入url，那么我们可以使用path。path传输需要预先在路由中定义占位符号。在router.js中，我们修改/view1,让他支持从path传递id这个参数：

...
{
    path: '/view1/:id',
    name: 'view1',
    component: () => import('@/views/test1'),
},
...

传递参数的方式依然有两种：

  • 在url中拼接，原则上我们是知道占位符定义的位置的，那么我们还是可以通过把参数拼接 到url中，只是相比query，参数有时候要拼接到url中间位置。
  • 编码方式传递，和query有点不同:this.$router.push({name:'view1',params:{id:1}})；也可以这样this.$router.push({path:'/view/1'}),其实也是字符串拼接的方式。

取值方式：
this.$route.params.id

meta的使用

有时候，我们想让路由带更多的信息，比如权限，菜单图标。这个时候我们就需要使用meta了。meta就是router专门考虑到这个需求设计的。
修改路由为：

···
{
    path: '/view1',
    name: 'view1',
    component: () => import('@/views/test1'),
    meta:{
        access:true,
        icon:'menu'
    }
},
···

现在我们在test1.vue的mounted钩子里面读取:

<template>
    <div>test1</div>
</template>

<script>
    export default {
        mounted(){
             //在控制台输出
           console.log( this.$route.meta)
        }
    }
</script>

一般输出的就是当前路由的meta数据。

路由守卫（拦截）

路由守卫这个功能，这个很重要，像未登录跳转，权限拦截跳转都会用到。我们在src下新建一个文件router.config.js：

import router from './router'

// 路由前置拦截器
router.beforeEach((to, from, next) => {
  next()//调用后放行。
})
// 路由后置拦截器
router.afterEach((to, from) => {
})

前置拦截就是进入目标路由之前做拦截处理，后置就是进入目标路由后做拦截处理。具体处理逻辑我们可以自己实现。参数方面，to，from都是路由对象，在前置拦截里面，to是目标路由，from是当前路由；在后置拦截里面，to是当前路由，from是上一次的路由。next是一个方法，调用就可以放行。
然后我们在main.js中引入这个文件import './router.config'

动态加载路由

这里介绍的动态路由，是指这个路由不是事先配置好的，是通过代码动态添加进去的，一般可以用在后台管理菜单。这里不做介绍了，我们将在案例实践中来做实验。

小结

路由还有很多功能，我这里介绍了都是常用的功能，如果想更加深入挖掘，可到官网查看手册。