学习前端_vue组件_路由的嵌套

最新推荐文章于 2024-01-23 11:43:25 发布

啊辉的小号

最新推荐文章于 2024-01-23 11:43:25 发布

阅读量119

点赞数

分类专栏：前端学习小菜鸟学前端文章标签：前端学习 Vue 路由嵌套

本文链接：https://blog.csdn.net/weixin_38527697/article/details/99675770

版权

小菜鸟学前端同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

前端学习

24 篇文章 0 订阅

订阅专栏

渲染组件中设置自己的Router-link和 RouterView
在routes中设置子路由配置通过Children

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>嵌套路由</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
</head>
<body>
  <div id="test">
    <router-link to="/com_a">组件A</router-link>
    <router-link to="/com_b">组件B</router-link>
    <router-view></router-view>
  </div>
  <template id="com_a">
    <div>
      <p>这是组件a</p>
    </div>
  </template>
  <template id="com_b">
    <div>
      <p>这是组件b</p>
      <router-link to="/com_b/com_1">小组件1</router-link>       <!-- 设置RouterLink  和RouterView -->
      <router-link to="/com_b/com_2">小组件2</router-link>
      <router-view></router-view>
    </div>
  </template>
  <template id="com_1"> 
    <div>
      <p>这是组件1</p>
    </div>
  </template>
  <template id="com_2"> 
      <div>
        <p>这是组件2</p>
      </div>
    </template>
  <script>
    var component_a={
      template:'#com_a'
    }
    var component_b={
      template:'#com_b'
    }
    var component_1={
      template:'#com_1'
    }
    var component_2={
      template:'#com_2'
    }
    var routes=[
      {path:'/com_a',component:component_a},
      {
        path:'/com_b',
        component:component_b,
        children:[                            //在这里设置子路由配置属性
          {
            path:'com_1',
            component:component_1
          },
          {
            path:'com_2',
            component:component_2
          }
        ]
      },

    ]
    const router = new VueRouter({
      routes
    })
    var app= new Vue({
      el:'#test',
      router
    })
  </script>
</body>
</html>

啊辉的小号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习前端_vue组件_路由的嵌套

渲染组件中设置自己的Router-link和RouterView 在routes中设置子路由配置通过Children<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
复制链接

扫一扫

专栏目录