VUE命名视图

最新推荐文章于 2024-04-26 17:37:33 发布

吃瓜的阳大王

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量89

点赞数

文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/qq_44822110/article/details/104802405

版权

VUE命名视图

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>命名视图</title>

</head>

<body>
    <div id="app">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/user">用户管理</router-link>
            <router-link to="/post">帖子管理</router-link>
        </div>
        <div>
            <router-view name="sidebar"></router-view>
            <router-view name="content"></router-view>
        </div>

    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>
    <script src="index.js"></script>
</body>

</html>

JS

// 直接在数组中以对象的方式定义规则(组件)[{path:'',component{}},{path:'',component{}}]
var routes = [
  {
    path: "/",
    component: {
      template: "<div><h1>首页</h1></div>"
    }
  },
  {
    path: "/user",
    components: {
      // 指定的视图名字
      sidebar: {
        template: "<div><ul><li>用户列表</li><li>权限管理</li></ul></div>"
      },
      // 指定的视图名字
      content: {
        template:
          "<div> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div>"
      }
    }
  },
  {
    path: "/post",
    components: {
      // 指定的视图名字
      sidebar: {
        template: "<div><ul><li>帖子列表</li><li>标签管理</li></ul></div>"
      },
      // 指定的视图名字
      content: {
        template:
          "<div> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div>"
      }
    }
  }
];
var router = new VueRouter({
  routes: routes
});

new Vue({
  el: "#app",
  router: router
});

吃瓜的阳大王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE命名视图

VUE命名视图HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...
复制链接

扫一扫