zoukankan      html  css  js  c++  java
  • vue-router多个组件模板放入同一个页面中

    红色框为增改部分!!!

     效果:

     1 import Vue from 'vue'
     2 import VueRouter from 'vue-router'
     3 Vue.use(VueRouter)
     4 
     5 const first = {template:'<div>这是first内容</div>'}
     6 const second = {template:'<div>这是second内容</div>'}
     7 const Home = {template:'<div>这是Home内容</div>'}
     8 const Home2 = {template:'<div>这是Home2222内容</div>'}
     9 
    10 const firstFirst = {template:'<div>这是firstFirst内容 {{ $route.params.id }} </div>'}
    11 const firstSecond = {template:'<div>这是firstSecond内容 {{ $route.params.id }}</div>'}
    12 const sld={
    13     template:`
    14     <div class="sld">
    15         <h2>二级组件</h2>
    16         <router-view class="abc"></router-view>
    17     </div>
    18 `
    19 }
    20 
    21 const router = new VueRouter({
    22     mode:"history",
    23     base:__dirname,
    24     routes:[
    25         {path:"/",name:"Home",components:{
    26             default:Home,
    27             left:first,
    28             right:second
    29         }},
    30         {path:"/first",component:sld,
    31             children:[
    32                 {path:"/",name:"Home-first",component:first},
    33                 {path:"first",name:"Home-first-first",component:firstFirst},
    34                 {path:"second",name:"Home-first-second",component:firstSecond}
    35             ]
    36         },
    37         {path:"/second",name:"Home-second",components:{
    38             default:Home2,
    39             left:first,
    40             right:second
    41 
    42         }}
    43     ]
    44 })
    45 
    46 new Vue({
    47     router,
    48     template:`
    49         <div id="r">
    50         <p>{{$route.name}}</p>
    51             <ul>
    52                 <li><router-link to="/">/</router-link></li>
    53                 <li><router-link to="/first">first</router-link>
    54                     <ul>
    55                         <li><router-link :to="{name:'Home-first-first',params:{id:111111}}">first</router-link></li>
    56                         <li><router-link :to="{name:'Home-first-second',params:{id:222222}}">second</router-link></li>
    57                     </ul>
    58                 </li>
    59                 <li><router-link to="/second">second</router-link></li>
    60             </ul>
    61             <router-view class="abc"></router-view>
    62             <router-view class="abc" name="left" style="float:left;50%;height:300px;background:#1E88DA"></router-view>
    63             <router-view class="abc" name="right" style="float:right;50%;height:300px;background:#ff0000"></router-view>
    64         </div>
    65     `
    66 }).$mount("#app")
  • 相关阅读:
    Java反编译代码分析(一)
    Java信号量Semaphore
    Ubuntu SVN安装&使用&命令
    Android -- Dialog动画
    Android -- EventBus使用
    Android -- queryIntentActivities
    解决:fatal: authentication failed for https
    MySQL表名大小写敏感导致的问题
    Publish to a Linux Production Environment
    layer.js 弹窗组件API文档
  • 原文地址:https://www.cnblogs.com/yijisi/p/11247894.html
Copyright © 2011-2022 走看看