vue路由篇(动态路由、路由嵌套)

什么是路由？网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另外一个接口，它决定的是一个端到端的网络路径。
web中，路由的概念也是相似，根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)
使用vue.js构建项目，vue.js自己就能够经过组合组件来组成应用程序；当引入vue-router后，咱们须要处理的是将组件(components)映射到路由(routes)，而后在须要的地方进行使用渲染。

1、基础路由

一、建立vue项目，执行vue init webpack projectName命令，默认安装vue-router。项目建立后，在主组件App.vue中的HTML部分：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

上述代码中，<router-view/>是路由出口，路由匹配到的组件将渲染在这里。

二、文件router/index.js中：

import Vue from 'vue' // 导入vue插件
import Router from 'vue-router' // 导入vue-router
import HelloWorld from '@/components/HelloWorld' // 导入HelloWorld组件

Vue.use(Router) // 引入vue-router
export default new Router({
  routes: [
    {
      path: '/', // 匹配路由的根路径
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

以上代码比较简单，通常的导入、引用操做，其中Vue.use()具体什么做用？
我的理解：Vue.use(plugin, arguments)就是执行一个plugin函数，或执行plugin的install方法进行插件注册(若是plugin是一个函数，则执行；如果一个插件，则执行plugin的install方法...)；并向plugin或其install方法传入Vue对象做为第一个参数；若是有多个参数，use的其它参数做为plugin或install的其它参数。(具体须要分析源码，在此再也不过多解释)
2、动态路由
什么是动态路由？动态路由是指路由器可以自动的创建本身的路由表，而且可以根据实际状况的变化实时地进行调整。
一、在vue项目中，使用vue-router若是进行不传递参数的路由模式，则称为静态路由；若是可以传递参数，对应的路由数量是不肯定的，此时的路由称为动态路由。动态路由，是以冒号为开头的(:)，例子以下：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/RouterComponents/:id',
      name: 'RouterComponents',
      component: RouterComponents
    }
  ]
})

二、路由跳转，执行方式有两大类；
第一大类：router-link模式，直接把参数写在to属性里面：

<router-link :to="{name:'RouterComponents',params:{id:110}}">跳转</router-link>

第二大类：$router.push()模式，代码以下：

methods: {
    changeFuc (val) {
      this.$router.push({
        name: 'RouterComponents',
        params: {id: val}
      })
    }
}

或者：

methods: {
    changeFuc (val) {
      this.$router.push({
        path: `/RouterComponents/${val}`,
      })
    }
}

3、嵌套路由
vue项目中，界面一般由多个嵌套的组件构成；同理，URL中的动态路由也能够按照某种结构对应嵌套的各层组件：

export default new Router({
  routes: [
    {
      path: '/', // 根路由
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/RouterComponents/:id',
      component: RouterComponents,
      children: [
        {
          path: '', // 默认路由
          name: 'ComponentA', // 当匹配上RouterComponents后，默认展现在<router-view>中
          component: ComponentA
        },
        {
          path: '/ComponentB',
          name: 'ComponentB',
          component: ComponentB
        },
      ]
    }
  ]
})