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

梦里梦外; 2021-09-16 06:50 587阅读 0赞

本系列的第一章，按照惯例，介绍一下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的方式引入相关的依赖，这里不过多阐述。还有一些必要的准备工作。为了方便理解，这里放上一张我的项目的结构图，重要部分都用红色方框圈出来了，这是我平时拿来玩的一个项目，杂七杂八的文件请忽略。

![70][]

首先你的项目必须要包含一个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>

最终结果：

![70 1][]

### 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>

结果如下：

![70 2][]

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

<table> 
 <thead> 
  <tr> 
   <th>模式</th> 
   <th>匹配路径</th> 
   <th>$route.params</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>/user/:username</td> 
   <td>/user/evan</td> 
   <td><code>{ username: 'evan' }</code></td> 
  </tr> 
  <tr> 
   <td>/user/:username/post/:post_id</td> 
   <td>/user/evan/post/123</td> 
   <td><code>{ username: 'evan', post_id: 123 }</code></td> 
  </tr> 
 </tbody> 
</table>

### 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
          }]
        },
      ]
    })

结果如下：

![70 3][]

[70]: /images/20210813/e1008311c48b4b4c93cb3df6a565a743.png
[70 1]: /images/20210813/d6c8afd33bec4d30bcc454b96af7ba4d.png
[70 2]: /images/20210813/5a97f53f25514c8da341c2a671d0806a.png
[70 3]: /images/20210813/5324ea0e61794e0d92efb7c1f846b0e6.png