前端应用_Vue_使用router 设计经典布局

最新推荐文章于 2024-08-24 10:02:13 发布

上海_彭彭

最新推荐文章于 2024-08-24 10:02:13 发布

阅读量528

点赞数

分类专栏： Vue.js 文章标签： vue router 经典布局

本文链接：https://blog.csdn.net/qq_34979346/article/details/99696835

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

使用经典布局的关键是这个，在根目录配置三个组建 ，让他同时显示

如下：

var routerObj=new VueRouter({
      routes:[
         {path:'/',components:{
           default: tmp1,
           left:tmp2,
           main:tmp3,
         }}],
      myactive: 'router-link-active',
    })

使用components 对应的是对象，对象里储存需要指定的组建，default 是默认的。

指定好组建以后我们要使用，使用的格式如下：

   <router-view   ></router-view>
    <div class="container">
      
   <router-view name='left'></router-view 
  //用name 进行指定 
  
   <router-view name='main'></router-view>

全部的代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src='../../lib/vue-2.4.0.js'></script>
  <script src='../../vue-router-3.0.1.js'></script>
  <style>
  .router-link-active{
    background-color: green;
    font-size: larger;
    color: aliceblue

  }
  .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      transition: all 0.5s ease;
    }
    html,body,h1,h2,h3{
      margin: 0%;
      padding:0%;
    }
    .header{
     
      background-color: aqua
    }
    .left{
     
      flex: 10%;
     
      background-color: chartreuse;
      height: 600px;

    }
    .main{
     
      flex: 80%;
 
      background-color: gold;
      height: 600px;
    }
    .container{
      
     
      display: flex;
    }
 
  </style> 
</head>
<body>
  <div id="pp">
    <router-view   ></router-view>
    <div class="container">
      
   <router-view name='left'></router-view>
  
  
   <router-view name='main'></router-view>
  
  </div>
  </div>
 
  <script>
    // 创建两个组建模板对象，让路由能找到并显示这个组件
    var tmp1={
      template:'<h1 class="header">header</h1>'
    }
    var tmp2={
      template:'<h2 class="left">left</h2>'
    }
    var tmp3={
      template:'<h3 class="main">main</h3>'
    }
    
  
    var routerObj=new VueRouter({
      routes:[
         {path:'/',components:{
           default: tmp1,
           left:tmp2,
           main:tmp3,
         }}],
      myactive: 'router-link-active',
    })
    new Vue({
      el:'#pp',
      data:{

      },
      methods:{
      },
      // 让路由对象 和vue 实例 绑定关系， 用于监听。 
      router:  routerObj,
    })
  </script>
</body>
</html>

效果如下：

在这里插入图片描述