(三)vue 一个页面多个视图

来源：互联网发布：网络娱乐节目片头音乐编辑：程序博客网时间：2024/05/16 09:55

index.html

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>vue-cli</title>  </head>  <body>    <div id="app"></div>    <script src="/dist/build.js"></script>  </body></html>

main.js

import Vue from 'vue'import Router from './Router'

router.js

/** * Created by Amy on 2017/12/13. */import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)var first  = {template:'<div>first内容</div>'}var second  = {template:'<div>second 内容</div>'}var Home  = {template:'<div>Home 内容</div>'}var hehe  = {template:'<div>hehe 内容</div>'}var router = new VueRouter({  mode:'history',  base: __dirname,  routes:[    {      path:'/',      components:{        default:Home,        left:first,        right:second      }    },    {      path:'/first',      components:{        default:hehe,        left:first,        right:second      }    }  ]})  new Vue({    router,    template:`        <div id="r">            <h1>导航</h1>            <p>{{ $route.name }}</p>            <ol>              <li><router-link to="/">Go to /</router-link></li>              <li><router-link to="/first">Go to first</router-link></li>            </ol>            <router-view class="asdf"></router-view>            <router-view class="asdf" name="left" style="float:left;width:50%;background-color: red;height: 100px;color: green;"></router-view>            <router-view class="asdf" name="right" style="float:right;width:50%;background-color: yellow;height: 100px;color: hotpink;"></router-view>        </div>                             `  }).$mount('#app')

阅读全文

0 0