关于javascript:浅谈VueRouter-嵌套路由

8次阅读

共计 2045 个字符，预计需要花费 6 分钟才能阅读完成。

从文档中可知，嵌套路由的应用场景为，能够依据提供的 URL 来拜访对应层级的组件，并将子组件的内容，渲染至上一级的 < router-view > 中

文档给出的图示：

/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

咱们晓得，创立一个路由配置须要 path 和 component 两个字段

const User = {template: "<div>this is a user</div>"}
const router = new VueRouter({
   routes:[
      {
      // 路由拜访门路
        path: "/user/foo",
      // 门路拜访的组件
        component: User
      }
   ]
})

那么嵌套路由呢？咱们须要这是须要一个新的字段 children，这是一个数组数组，外面蕴含的，就是咱们下一层级拜访的路由对象

const router = new VueRouter({
   routes:[
      {
      // 路由拜访门路
        path: "/user/foo",
      // 门路拜访的组件
        component: User,
        children: [
           {
              path: "profile",
              component: Profile
           }
        ]
      }
   ]
})

这样，咱们就能够通过 /user/foo/profile 这个门路，来拜访 Profile 组件，并将其渲染在父级组件的 router-view 中，这个嵌套关系能够始终继续上来，门路多写层，小问题

在文档提及动静路由匹配的时候，举出了一个例子

模式	匹配门路	URL 传参（$route.params）
/user/:username	/user/evan	{username: ‘evan’}

例子阐明，URL 中存在 /:xxx 格局的子门路，那么在路由中就会主动匹配成 /xxx 这样的子门路，同时，router 会将参数格式化成一个对象，可应用 this.$route.params 拜访该对象，若门路中无参数，则该对象为 {}

咱们晓得单层路由能够通过这样的动静参数进行匹配，那么嵌套路由能够吗？

咱们先批改一下路由的配置

<!-- 咱们定义 id 为 customid -->
<router-link to="/user/customid/profile">Profile</router-link>


 const User = {
    template:
       `
        <div>
        <h2>User {{$route.params.id}}</h2>
        <router-view></router-view>
        </div>
        `
 }
 const Profile = {template: "<div>Profile {{$route.params.id}}</div>"
 }
 const router = new VueRouter({
    routes: [
       {
          path: "/user/:id",
          component: User,
          children: [
             {
                path: "profile",
                component: Profile
              }
           ]
        }
    ]
 })

这是，浏览器关上 html 文件，会显示
router-link 转换后的 a 标签，以及路由拜访到的组件都曾经被渲染

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

<body>
    <div id="app">
        <router-link to="/user/customid/profile">Profile</router-link>
        <router-view></router-view>
    </div>
    <script>
        const User = {
            template:
                `
                <div>
                    <h2>User {{$route.params.id}}</h2>
                    <router-view></router-view>
                </div>
                `
        }
        const Profile = {template: "<div>Profile {{$route.params.id}}</div>"
        }
        const router = new VueRouter({
            routes: [
                {
                    path: "/user/:id",
                    component: User,
                    children: [
                        {
                            path: "profile",
                            component: Profile
                        }
                    ]
                }
            ]
        })

        new Vue({router}).$mount('#app')
    </script>
</body>

</html>

正文完