解決使用vue.js路由后失效的問題

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 19:44:23

解決使用vue.js路由后失效的問題

新學(xué)了vue.js中的路由在之前寫的vue的demo上加上了簡單的路由例子(來自vue-router 2)，但是加上點(diǎn)擊后只有地址欄變化，內(nèi)容并不變.且之前用jquery寫的一些效果也失效了.最后找到原因是因?yàn)橥粋€(gè)id被啟動(dòng)了兩次(第一次是之前使用vue組件時(shí)啟動(dòng)的，另外一個(gè)是路由時(shí)啟動(dòng)的)。附上部分代碼；

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀新學(xué)了vue.js中的路由在之前寫的vue的demo上加上了簡單的路由例子(來自vue-router 2)，但是加上點(diǎn)擊后只有地址欄變化，內(nèi)容并不變.且之前用jquery寫的一些效果也失效了.最后找到原因是因?yàn)橥粋€(gè)id被啟動(dòng)了兩次(第一次是之前使用vue組件時(shí)啟動(dòng)的，另外一個(gè)是路由時(shí)啟動(dòng)的)。附上部分代碼；

下面我就為大家分享一篇解決使用vue.js路由后失效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。

新學(xué)了vue.js中的路由在之前寫的vue的demo上加上了簡單的路由例子(來自vue-router 2),但是加上點(diǎn)擊后只有地址欄變化,內(nèi)容并不變.且之前用jquery寫的一些效果也失效了.最后找到原因是因?yàn)橥粋€(gè)id被啟動(dòng)了兩次(第一次是之前使用vue組件時(shí)啟動(dòng)的,另外一個(gè)是路由時(shí)啟動(dòng)的)

附上部分代碼

<!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">考核相關(guān)</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="個(gè)人資料">
 <!-- 路由鏈接添加處 -->
 <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="會(huì)員資料">
 <router-link to = "/list"><el-menu-item index="3"><i class="el-icon-message"></i>會(huì)員信息</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') //路由 啟動(dòng)應(yīng)用
 var Ctor = Vue.extend(Main)
 new Ctor().$mount('#top-menu')
 //主要就是下面這條語句多余 這是寫組件時(shí)啟動(dòng)應(yīng)用所用的語句
 //new Ctor().$mount('#left-menu')
 </script>
</html>

上面是我整理給大家的，希望今后會(huì)對大家有幫助。

相關(guān)文章：

spirngmvc js傳遞復(fù)雜json參數(shù)到controller的實(shí)例

Vue.js 表單控件操作小結(jié)

js傳遞數(shù)組參數(shù)到后臺controller的方法

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com