深入简出vue路由——3.嵌套路由

最新推荐文章于 2025-08-10 18:16:10 发布

原创最新推荐文章于 2025-08-10 18:16:10 发布 · 951 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-router

vue路由系列-学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用Vue.js与Vue Router实现基于动态路径参数的导航及子路由的功能。具体包括了如何定义组件、配置路由、创建链接等关键步骤。

代码在这里

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/boo/kkk">/user/foo/kkk</router-link>
    <router-link to="/user/boo/qqq">/user/foo/qqq</router-link>
  </p>  
  <router-view></router-view>
</div>
<script type="text/javascript">
  const User = {
    template:`
      <div class="user">
          <h2>User {{$route.params.id}}</h2>
          <router-view></router-view>
      </div>
    `
  }
  const ccc = {
    template:'<h3>CCC</h3>'
  };
  const kkk = {
    template:'<h3>KKK</h3>'
  };
  const qqq = {
    template:'<h3>QQQ</h3>'
  }
  const router = new VueRouter({
    routes:[
      {
        path:'/user/:id',// 动态路径参数 以冒号开头
        component:User,
        children:[
          {path:'',component:ccc},
          {path:'kkk',component:kkk},
          {path:'qqq',component:qqq}
        ]
      }
    ]
  })
  const app = new Vue({
    router//ES6解构函数的写法相当于 router：router
  }).$mount('#app')
</script>
</body>

</html>