溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關使用vue.js路由后失效怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
代碼：
<!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>
<div id="top-menu">
<div class="logo">
<img src="baidu.gif" alt="">
</div>
<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>
</div>
<div 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>
<!-- 路由內容顯示 -->
<div class = "content">
<router-view></router-view>
</div>
</div>
</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:'<div>foo</div>'}
const List = {template:'<div>list</div>'}
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>關于“使用vue.js路由后失效怎么辦”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
