ホームページ > ウェブフロントエンド > jsチュートリアル > vue.js ルーティング使用後の失敗を解決する方法

vue.js ルーティング使用後の失敗を解決する方法

小云云
リリース: 2018-05-21 11:15:16
オリジナル
2019 人が閲覧しました

vue.jsでルーティングを新たに学習し、以前に書いたvueデモ(vue-router 2から)に簡単なルーティングの例を追加しましたが、クリックを追加した後はアドレスバーのみが変化し、コンテンツは変化します。変更されず、以前に jquery で記述されたいくつかのエフェクトも失敗しました。最終的に、同じ ID が 2 回アクティブ化されたことが原因でした (1 回目は以前に vue コンポーネントを使用したとき、もう 1 回目はルーティング時でした)。

添付はコードの一部です

<!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>
ログイン後にコピー

以上がvue.js ルーティング使用後の失敗を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート