解決使用vue.js路由後失效的問題-js教程-PHP中文網

首頁

web前端

js教程

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

亚连

May 29, 2018 pm 03:51 PM

vue.js 路由

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

新學了vue.js中的路由在之前寫的vue的demo上加上了簡單的路由例子(來自vue-router 2),但是加上點擊後只有地址欄變化,內容並不變.且之前用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">培养信息</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: &#39;1&#39;
 };
 },
 methods: {
 handleSelect(key, keyPath) {
  /*console.log(key, keyPath);*/
 }
 }
 }
//vue路由部分
 const Information = {template:&#39;<p>foo</p>&#39;}
 const List = {template:&#39;<p>list</p>&#39;}
 const routes = [
 {path:&#39;/information&#39;,component:Information},
 {path:&#39;/list&#39;,component:List}]
 const router = new VueRouter({
 routes
 })
 const app = new Vue({
 router
 }).$mount(&#39;#left-menu&#39;) //路由 启动应用
 var Ctor = Vue.extend(Main)
 new Ctor().$mount(&#39;#top-menu&#39;)
 //主要就是下面这条语句多余 这是写组件时启动应用所用的语句
 //new Ctor().$mount(&#39;#left-menu&#39;)
 </script>
</html>

登入後複製

上面是我整理給大家的，希望今後會對大家有幫助。

spirngmvc js傳遞複雜json參數到controller的實例

Vue.js 表單控制項操作小結

js傳遞陣列參數到後台controller的方法

以上是解決使用vue.js路由後失效的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

在Slim框架中實作API路由的方法 Aug 02, 2023 pm 05:13 PM

在Slim框架中實作API路由的方法Slim是一款輕量級的PHP微型框架，它提供了一個簡單且靈活的方式來建立Web應用程式。其中一個主要功能是實作API路由，使我們能夠將不同的請求對應到對應的處理程序。本文將介紹如何在Slim框架中實作API路由，並提供一些程式碼範例。首先，我們需要安裝Slim框架。可以透過Composer來安裝最新版本的Slim。打開終端機並

Java Apache Camel：打造靈活且有效率的服務導向架構 Feb 19, 2024 pm 04:12 PM

ApacheCamel是一個基於企業服務匯流排(ESB)的整合框架，它可以輕鬆地將不同的應用程式、服務和資料來源整合在一起，從而實現複雜的業務流程自動化。 ApacheCamel使用基於路由的設定方式，可以輕鬆定義和管理整合流程。 ApacheCamel的主要特點包括：靈活性：ApacheCamel可以輕鬆地與各種應用程式、服務和資料來源整合。它支援多種協議，包括Http、JMS、SOAP、FTP等。高效性：ApacheCamel非常高效，它可以處理大量的訊息。它使用非同步訊息傳遞機制，可以提高效能。可擴

如何在Vue專案中使用路由實現頁面切換動畫效果的客製化？ Jul 21, 2023 pm 02:37 PM

如何在Vue專案中使用路由實現頁面切換動畫效果的客製化？引言：在Vue專案中，路由是我們常用的功能之一。透過路由可以實現頁面之間的切換，提供了良好的使用者體驗。而為了讓頁面切換更加生動，我們可以透過客製化動畫效果來實現。本文將介紹如何在Vue專案中使用路由實現頁面切換動畫效果的客製化。建立Vue專案首先，我們需要建立一個Vue專案。可以使用VueCLI來快速搭建

PHP中靈活配置路由規則的實作方法與經驗總結 Oct 15, 2023 pm 03:43 PM

PHP中靈活配置路由規則的實作方法和經驗總結引言：在Web開發中，路由規則是非常重要的一部分，它決定了URL與特定的PHP腳本的對應關係。在傳統的開發方式中，我們通常會在路由檔案中設定各種URL規則，然後將URL與對應的腳本路徑進行對應。但是，隨著專案的複雜度增加和業務需求的變化，如果每個URL都需要手動配置，將會變得非常麻煩且不靈活。那麼，在PHP中如何實

使用JavaScript函數實現網頁導航和路由 Nov 04, 2023 am 09:46 AM

在現代Web應用程式中，實現網頁導航與路由是十分重要的一環。利用JavaScript的函數來實現這個功能，可以讓我們的網路應用程式更加靈活、可擴展且使用者友好。本文將介紹如何使用JavaScript函數來實現網頁導航和路由，並提供具體的程式碼範例。實現網頁導航對於一個Web應用程式而言，網頁導航是使用者操作最頻繁的一個部分。當使用者點擊頁面上的

如何在Vue中使用路由實現頁面跳轉？ Jul 21, 2023 am 08:33 AM

如何在Vue中使用路由實現頁面跳轉？隨著前端開發技術的不斷發展，Vue.js已經成為了目前最熱門的前端框架之一。而在Vue開發中，實現頁面跳躍是不可或缺的一部分。 Vue提供了VueRouter來管理應用的路由，透過路由可以實現頁面之間的無縫切換。本文將介紹如何在Vue中使用路由實現頁面跳轉，並附有程式碼範例。首先，在Vue專案中安裝vue-router插件。

uniapp中路由的動態新增與刪除方法 Dec 17, 2023 pm 02:55 PM

Uniapp是一個基於Vue.js的跨端框架，支援一次編寫，同時產生H5、小程式、APP等多端應用，並且在開發過程中十分注重效能和開發效率。在Uniapp中，路由的動態新增與刪除是開發過程中常會遇到的問題，因此本文將介紹Uniapp中路由的動態新增與刪除方法，並提供特定的程式碼範例。一、路由動態新增動態新增路由，可依實際需求，在頁面載入時或使用者操作後，