Vue单页面多应用

最新推荐文章于 2024-01-12 16:04:16 发布

Lvdon9

最新推荐文章于 2024-01-12 16:04:16 发布

阅读量212

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_37995109/article/details/88767091

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <router-view name="left"  style="float:left;width:50%;background-color:#ccc;height:300px;"/>
    <router-view name="right"  style="float:right;width:50%;background-color:#c0c;height:300px;"/>

    
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'





Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components:{ 
        default:HelloWorld,
        left:Hi1,
        right:Hi2
      },
    },{
      path: '/jspang',
      name: 'HelloWorld',
      components:{ 
        default:HelloWorld,
        left:Hi2,
        right:Hi1
      },
    },
  ]
})

注意路由要对应vue页面的name