Dieses Mal werde ich Ihnen vorstellen, dass das Routing von vue.js ungültig ist und nicht verwendet werden kann. Das Folgende ist ein praktischer Fall sehen.
Ich habe das Routing in vue.js neu gelernt und der Vue-Demo, die ich zuvor geschrieben habe, ein einfaches Routing-Beispiel hinzugefügt (von vue-router 2), aber nach dem Hinzufügen des Klicks nur noch Die Die Adressleiste ändert sich, aber der Inhalt ändert sich nicht. Und schließlich wurde der Grund dafür gefunden, dass dieselbe ID zweimal gestartet wurde (das erste Mal, als die Vue-Komponente verwendet wurde, und das andere Mal). einer wurde während des Routings gestartet)
Im Anhang ist ein Teil des Codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="external nofollow" >
</head>
<style>
body {
margin: 0;
padding: 0;
}
.logo {
width: 166.65px;
height: 60px;
position: absolute;
}
.el-menu-demo {
margin-left: 166.65px;
}
.tac {
width: 500px;
}
.bar2,.bar3{
display: none;
}
</style>
<body>
<p id="top-menu">
<p class="logo">
<img src="baidu.gif" alt="">
</p>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1" class="nav1">基本资料</el-menu-item>
<el-menu-item index="2" class="nav2">培养信息</el-menu-item>
<el-menu-item index="3" class="nav3">考核相关</el-menu-item>
<el-menu-item index="4" class="nav4">清算</el-menu-item>
</el-menu>
</p>
<p id="left-menu">
<el-row class="tac">
<!-- 基本资料-->
<el-col :span="8" class="bar1">
<el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo" @select="handleSelect" theme="dark">
<el-menu-item-group title="个人资料">
<!-- 路由链接添加处 -->
<router-link to = "/information"><el-menu-item index="1"><i class="el-icon-message"></i>基本信息</el-menu-item></router-link>
<el-menu-item index="2"><i class="el-icon-message"></i>修改密码</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="会员资料">
<router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>会员信息</el-menu-item></router-link>
</el-menu-item-group>
<el-menu-item-group title="小组资料">
<el-menu-item index="4"><i class="el-icon-message"></i>小组信息</el-menu-item>
</el-menu-item-group>
</el-menu>
</el-col>
</el-row>
<!-- 路由内容显示 -->
<p class = "content">
<router-view></router-view>
</p>
</p>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nav1").click(function(){
$(".bar1").show().siblings().hide();
})
$(".nav2").click(function(){
$(".bar2").show().siblings().hide();
})
$(".nav3").click(function(){
$(".bar3").show().siblings().hide();
})
})
</script>
<script type="text/javascript">
//vue组件部分
var Main = {
data() {
return {
activeIndex: '1'
};
},
methods: {
handleSelect(key, keyPath) {
/*console.log(key, keyPath);*/
}
}
}
//vue路由部分
const Information = {template:'<p>foo</p>'}
const List = {template:'<p>list</p>'}
const routes = [
{path:'/information',component:Information},
{path:'/list',component:List}]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#left-menu') //路由 启动应用
var Ctor = Vue.extend(Main)
new Ctor().$mount('#top-menu')
//主要就是下面这条语句多余 这是写组件时启动应用所用的语句
//new Ctor().$mount('#left-menu')
</script>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall hier gelesen haben Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung von JS-Prototypen und Prototypenketten
Detaillierte Erläuterung der Verwendung von Angular CLI zum Generieren von Angular 5-Projekten
Das obige ist der detaillierte Inhalt vonDas Routing von vue.js ist ungültig und kann nicht verwendet werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
