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

37次阅读

共计 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>

正文完
 0