vue-router入门（1）—— 基本路由，动态匹配路由，嵌套路由

  本系列的第一章，按照惯例，介绍一下vue-router的设计初衷，我第一次接触到vue-router是通过vue-cli的全家桶，vue-router的设计之初是为了适应单页面应用开发，但事实上，你通过新标签页的方式去访问某个路由，和你通过当前页“跳转”到该路由，路由中所包含的信息都不会丢失，当然新标签页打开和当前页打开在某些情况下也是有区别的。（比如你打开../user/123,在通过当前页访问../user/234,由于vue-router做了优化，他可能不会重新加载当前页面的组件，也就是不走vue的生命周期，如果你用新标签页打开的话，由于是新页面，那么新页面就需要重新加载一遍该页面的子组件了，这个在后面会提到）

  相比于vue-router,vuex反而更加依赖于单页面的特性，你可以尝试开两个页面，修改A页面的state，B页面并不会有任何响应，因为这两个页面的vuex实例并不是同一个。这里算是对上一系列内容的一个小补充。

  在用vue-router之前，你可能需要用npm的方式引入相关的依赖，这里不过多阐述。还有一些必要的准备工作。为了方便理解，这里放上一张我的项目的结构图，重要部分都用红色方框圈出来了，这是我平时拿来玩的一个项目，杂七杂八的文件请忽略。

  首先你的项目必须要包含一个router文件夹，这个在全家桶中也会自动包含。内容一般如下所示。

//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  routes: [
   //这里是路由信息，后面会讲到
  ]
})

  然后你需要在main.js引入router文件夹下的index.js，并把他挂载到全局的Vue实例中去，这样所有的子组件便可以通过this.$router，this.$route去访问vue-router对象了。

//main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

    做好准备工作之后，后面的操作基本都是改写router/index.js，增删路由。

1.基本路由

  现在在route/index.js配置文件中，“注册”一个最普通的路由，仅仅包括路径。

//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/vueRouterPlay1',//浏览器访问路径
      name: 'vueRouterPlay1', //路由名称
      component: vueRouterPlay1 //模板，对应import引入的模板信息
    }
  ]
})

  在App.vue中，用<router-view/>标签，将子页面设置好的模板暴露给父页面。你可以这么理解"暴露"一词，就是将你写好的模板，命名为routerView,然后你可以在dom中用<router-view/>标签标记模板渲染的位置，这跟Vue中template的使用非常相似，只是这个template有配合路由使用的一些特点罢了。

//App.vue
<template>
  <div id="app">
    <!-- 我是头部 -->
    <header>我是头部</header>
    <!-- 路由出口 -->
    <router-view/>
    <!-- 路由以外的公共部分 -->
    <footer>我是脚部</footer>
  </div>
</template>

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

  完成后，你可以在vueRouterPlay1.vue页面中写入任意代码，看下最终效果。

<template>
  <div class="body">我是页面1</div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.body{
  margin-top: 20px;
  padding: 20px;
  height: 400px;
  background: greenyellow;
}
</style>

  最终结果：

2.动态路由匹配

  动态路由匹配是vue-router中常用的功能，比如我们做了一个user页面，你希望/user/id=123映射到该页面，你也希望/user/id=234也能映射到当前页面，在vue-router中通过正则匹配的方式提供了这种相似路由访问的方式，当然不需要你手动写正则（如果你希望手写，vue-router也是支持的），你只需按照vue-router的规则注册路由即可。

  下面我们稍微改写一下，/router/index.js配置文件的注册信息。

//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      // 动态路径参数 以冒号开头
      path: '/vueRouterPlay1/:id',//这里有变化
      name: 'vueRouterPlay1', //不需要变
      component: vueRouterPlay1 //不需要变
    }
  ]
})

  vue-router将$route——当前页面路由信息，和$router——全局路由信息，都挂载到this实例中去，你可以在任意子组件访问这两个路由信息。

<template>
  <div class="body">我是页面1
    <span>{{'我的id是：'+id}}</span>
  </div>
</template>

<script>
export default {
  computed: {
    id: function () {
      return this.$route.params.id //参数都保存在params中
    }
  },
  created () {
    console.log(this.$route) // 当前子页面路由信息
    console.log(this.$router) // 全局路由信息
  }
}
</script>

<style lang="less" scoped>
.body{
  margin-top: 20px;
  padding: 20px;
  height: 400px;
  background: greenyellow;
}
</style>

  结果如下：

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }

 

3.嵌套路由

  在实际开发过程中，我从来，没有，用过，这个东西，但还是有必要了解一下，如果有用武之地也可以用起来。

  嵌套，说白了，就是嵌套。跟for循环嵌套，if条件嵌套一样，路由组件也可以嵌套路由子组件。

  你可以理解为App.vue中的<router-view/>是路由最外层的出口，子组件中也可以有自己的<router-view/>，我们稍微改写一下vueRouterPlay1.vue中的代码。

<template>
  <div class="body">我是页面1
    <span>{{'我的id是：'+id}}</span>
    <!-- 嵌套子路由 -->
    <router-view/>
  </div>
</template>

<script>
export default {
  computed: {
    id: function () {
      return this.$route.params.id
    }
  }
}
</script>
<style lang="less" scoped>
.body{
  margin-top: 20px;
  padding: 20px;
  height: 400px;
  background: greenyellow;
}
</style>

  当然，我们也应该在/router/index.js配置文件中声明一下，这个子路由对应哪个模板。在vue-router中，你需要用children声明某个路由是否含有子路由，当然子路由也可以有自己的子路由，你可以不断的嵌套，嵌套，嵌套...说实话我觉得这东西没什么意义。（可能是我做的项目比较简单，还没找到比较好的应用）

//router文件夹下 index.js
import Vue from 'vue'
import Router from 'vue-router'
// 探究一下vue-router
import vueRouterPlay1 from '@/page/vueRouterPlay/vueRouterPlay1.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/vueRouterPlay1/:id',
      name: 'vueRouterPlay1',
      component: vueRouterPlay1,
      children: [{
        // 当 /vueRouterPlay1/:id/vueRouterPlay2 匹配成功，
        // vueRouterPlay2 会被渲染在 vueRouterPlay1 的 <router-view> 中
        path: 'vueRouterPlay2',
        component: vueRouterPlay2
      }]
    },
  ]
})

  结果如下：