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

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

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

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

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

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

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

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view>
     <div></div>
     <router-view>
          <div></div>
          <div></div>
          <router-view></router-view>
     </router-view>
  </router-view>
</div>

这里只是示意一下最终渲染出来的结果，第一层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: '<div>User{{$route.param.id}}</div>'
}

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

那么多路由又是什么呢？

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

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

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

猜你喜欢