!DOCTYPE htmlhtml head meta charset=UTF-8 titletitle script src=vuejsscript script src=vue-routerjsscript head body style ullih1 padding 0; margin 0; list-style none; #app wi
<p>代码错误已修正，以下是修正后的代码：</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.js"></script>
<script src="../vue-router.js"></script>
</head>
<body>
<pre><code> <style>
ul,li,h1{
padding: 0;
margin: 0;
list-style: none;
}
#app{
width: 100%;
display: flex;
flex-direction: row;
}
ul{
width: 200px;
flex-direction: column;
color: #fff;
}
li{
flex: 1;
background: #000;
margin: 5px auto;
text-align: center;
line-height: 30px;
}
.about-detail{
flex: 1;
margin-left: 30px;
}
.about-detail h1{
font-size: 24px;
color: blue;
}
</style>
<div id="app">
<ul>
<router-link to="/about" tag="li">关于公司</router-link>
<router-link to="/contact" tag="li">联系我们</router-link>
</ul>
<router-view></router-view>
</div>
<template id="about-tmp">
<div class="about-detail">
<h1>北京科技有限公司简介</h1>
<router-link to="/about/detail">公司简介</router-link>
<router-link to="/about/governance">公司治理</router-link>
<router-view></router-view>
</div>
</template>
<template id="contact-tmp">
<div class="about-detail">
<h1>联系我们</h1>
<p>公司位于北京市海淀区中关村科技园内，主营业务包括餐饮娱乐，服装设计等</p>
</div>
</template>
<script>
var about={template:'#about-tmp'}
var contact={template:'#contact-tmp'}
var detail={
template:'<p>xx是全球领先</p>'
}
var governance={
template:'<p>公司坚持与客户为中心，以奋斗着为本</p>'
}
var router = new VueRouter({
routes:[
{path:'/',redirect:'/about'},
{
path:'/about',
component:about,
children:[
{path:'detail',component:detail},
{path:'governance',component:governance}
]
},
{path:'/contact',component:contact}
]
})
var vm=new Vue({
el:'#app',
router:router
})
</script>
</body>
</code></pre>
</html
原文地址: https://www.cveoy.top/t/topic/e1X2 著作权归作者所有。请勿转载和采集!