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

最新推荐文章于 2025-06-05 15:01:30 发布

amyloverice

最新推荐文章于 2025-06-05 15:01:30 发布

阅读量5.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/amyloverice/article/details/78802379

本文介绍如何在 Vue 应用中创建一个页面并管理多个视图。通过 index.html 文件设置基本结构，main.js 文件引入 Vue 及相关配置，以及 router.js 文件定义路由规则，实现了视图间的导航和切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')