這次帶給大家vue.js路由失效如何處理，vue.js路由失效如何處理的注意事項有哪些，以下就是實戰(zhàn)案例，一起來看一下。
新學了vue.js中的路由在之前寫的vue的demo上加上了簡單的路由例子(來自vue-router 2),但是加上點擊後只有地址欄變化,內(nèi)容並不變.且之前用jquery寫的一些效果也失效了.最後找到原因是因為同一個id被啟動了兩次(第一次是之前用vue組件時啟動的,另外一個是路由時啟動的)
附上部分程式碼
<!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">培養(yǎng)信息</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>
<!-- 路由內(nèi)容顯示 -->
<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>
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！
推薦閱讀：
Angular CLI Angular 5實戰(zhàn)專案示範
以上是vue.js路由失效如何處理的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動的應用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
在Slim框架中實作API路由的方法
Aug 02, 2023 pm 05:13 PM
在Slim框架中實作API路由的方法Slim是一款輕量級的PHP微型框架，它提供了一個簡單且靈活的方式來建立Web應用程式。其中一個主要功能是實作API路由，使我們能夠?qū)⒉煌恼埱髮綄奶幚沓绦?。本文將介紹如何在Slim框架中實作API路由，並提供一些程式碼範例。首先，我們需要安裝Slim框架?？梢酝高^Composer來安裝最新版本的Slim。打開終端機並
vue.js vs.反應：特定於項目的考慮因素
Apr 09, 2025 am 12:01 AM
Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經(jīng)驗不足或項目規(guī)模較小的情況。 2)React的生態(tài)系統(tǒng)更豐富，適合有高性能需求和復雜功能需求的項目。
Java Apache Camel：打造靈活且有效率的服務導向架構
Feb 19, 2024 pm 04:12 PM
ApacheCamel是一個基於企業(yè)服務匯流排(ESB)的整合框架，它可以輕鬆地將不同的應用程式、服務和資料來源整合在一起，從而實現(xiàn)複雜的業(yè)務流程自動化。 ApacheCamel使用基於路由的設定方式，可以輕鬆定義和管理整合流程。 ApacheCamel的主要特點包括：靈活性：ApacheCamel可以輕鬆地與各種應用程式、服務和資料來源整合。它支援多種協(xié)議，包括Http、JMS、SOAP、FTP等。高效性：ApacheCamel非常高效，它可以處理大量的訊息。它使用非同步訊息傳遞機制，可以提高效能?？蓴U
Vue.js很難學習嗎？
Apr 04, 2025 am 12:02 AM
Vue.js不難學，特別是對於有JavaScript基礎的開發(fā)者。 1)其漸進式設計和響應式系統(tǒng)簡化了開發(fā)過程。 2)組件化開發(fā)讓代碼管理更高效。 3)使用示例展示了基本和高級用法。 4)常見錯誤可以通過VueDevtools調(diào)試。 5)性能優(yōu)化和最佳實踐如使用v-if/v-show和key屬性可提升應用效率。
PHP中靈活配置路由規(guī)則的實作方法與經(jīng)驗總結
Oct 15, 2023 pm 03:43 PM
PHP中靈活配置路由規(guī)則的實作方法和經(jīng)驗總結引言：在Web開發(fā)中，路由規(guī)則是非常重要的一部分，它決定了URL與特定的PHP腳本的對應關係。在傳統(tǒng)的開發(fā)方式中，我們通常會在路由檔案中設定各種URL規(guī)則，然後將URL與對應的腳本路徑進行對應。但是，隨著專案的複雜度增加和業(yè)務需求的變化，如果每個URL都需要手動配置，將會變得非常麻煩且不靈活。那麼，在PHP中如何實
uniapp中路由的動態(tài)新增與刪除方法
Dec 17, 2023 pm 02:55 PM
Uniapp是一個基於Vue.js的跨端框架，支援一次編寫，同時產(chǎn)生H5、小程式、APP等多端應用，並且在開發(fā)過程中十分注重效能和開發(fā)效率。在Uniapp中，路由的動態(tài)新增與刪除是開發(fā)過程中常會遇到的問題，因此本文將介紹Uniapp中路由的動態(tài)新增與刪除方法，並提供特定的程式碼範例。一、路由動態(tài)新增動態(tài)新增路由，可依實際需求，在頁面載入時或使用者操作後，
使用JavaScript函數(shù)實現(xiàn)網(wǎng)頁導航和路由
Nov 04, 2023 am 09:46 AM
在現(xiàn)代Web應用程式中，實現(xiàn)網(wǎng)頁導航與路由是十分重要的一環(huán)。利用JavaScript的函數(shù)來實現(xiàn)這個功能，可以讓我們的網(wǎng)路應用程式更加靈活、可擴展且使用者友好。本文將介紹如何使用JavaScript函數(shù)來實現(xiàn)網(wǎng)頁導航和路由，並提供具體的程式碼範例。實現(xiàn)網(wǎng)頁導航對於一個Web應用程式而言，網(wǎng)頁導航是使用者操作最頻繁的一個部分。當使用者點擊頁面上的
VUE是用於前端還是後端？
Apr 03, 2025 am 12:07 AM
Vue.js主要用於前端開發(fā)。 1)它是一個輕量級且靈活的JavaScript框架，專注於構建用戶界面和單頁面應用。 2)Vue.js的核心是其響應式數(shù)據(jù)系統(tǒng)，數(shù)據(jù)變化時視圖自動更新。 3)它支持組件化開發(fā)，UI可拆分為獨立、可複用的組件。
