VUE学习笔记(三)-子路由、多路由、嵌套路由、动态路由都是什么鬼？

最近学习到VUE路由这块，发现这块知识点有点多，好容易混乱，我的学习习惯就是先要建立框架，然后再去挨个学习搞懂，所以先来把概念搞搞清楚再说。

首先，我们要知道VUE路由创建的是单页面路由。

子路由其实和单路由意思是一样的，单路由应该很好理解，因为我们都知道路由是可以一层一层嵌套的，你可以想象一下俄罗斯套娃，就是一个套一个的这种感觉，而里面那个都会一直被外面一个包含着。所以单路由的意思就是只有一层呗，放在界面中应该是这样的。

  
Hello App!
  

    
    
    
    Go to Foo
    Go to Bar
  
  
  
  

router-view中加载的组件里不包含router-view标签，这就是单路由啦，单路由应该是我们使用的最简单的一种路由吧。

讲到这里，顺便把嵌套路由也一起理解了吧，嵌套路由就是一层一层嵌套的路由，啥意思呢，我们都知道路由的入口是router-view，每一个router-view标签就相当于组件的最外层框架，那么一层一层嵌套主要就是指router-view标签的嵌套，大概就是下面这种结构，仅仅是个示意哈~

  
Hello App!
  

    
    
    
    Go to Foo
    Go to Bar
  
  
  
  
     

     
          

          

          
     
  

这里只是示意一下最终渲染出来的结果，第一层router-view中加载的组件中也包含一个router-view,第二个router-view组件中渲染的组件中也包含一个router-view,从而实现层层嵌套。

所以可以说单路由是嵌套路由的一种，不过它只有一层罢了。

动态路由，路劲可以动态变更，比如前面我们接触的路径都是写死的，但有时候我们想根据不同的参数加载不同的组件，使用以下形式来实现。

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

比如我们可以根据username的值不同，来加载不同的组件，也可以不同的username值加载同一个组件，都是OK的。

  基本用法如下：

const User = {
  template: '
User{{$route.param.id}}
'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

那么多路由又是什么呢？

在一个界面中只有一个路由入口，叫单路由，那么有多个路由入口，叫啥？于是起了个名 叫多路由，那你可能要问了，这些路由怎么区分呢，起个名儿不就行啦，多路由类似于下面这种格式，要和嵌套路由区分开哦，一个是俄罗斯套娃，一个是排排坐。