vue.js ルーティングの失敗に対処する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

vue.js ルーティングの失敗に対処する方法

php中世界最好的语言

Jun 15, 2018 pm 03:55 PM

vue.js ルーティング

今回はvue.jsのルーティングが失敗した場合の対処法を紹介します。vue.jsのルーティングが失敗した場合の対処方法の注意点は以下のとおりです。

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: '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>

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。推奨読書:

react+native+video で全画面効果を実現

Angular CLI+Angular 5 の実践的なプロジェクトのデモ

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1423

Laravel チュートリアル

1318

PHP チュートリアル

1269

C# チュートリアル

1248

Related knowledge

Slim フレームワークで API ルーティングを実装する方法 Aug 02, 2023 pm 05:13 PM

Slim フレームワークで API ルーティングを実装する方法 Slim は、Web アプリケーションを構築するためのシンプルかつ柔軟な方法を提供する軽量の PHP マイクロフレームワークです。主な機能の 1 つは API ルーティングの実装で、これにより、さまざまなリクエストを対応するハンドラーにマッピングできるようになります。この記事では、Slim フレームワークで API ルーティングを実装する方法を紹介し、いくつかのコード例を示します。まず、Slim フレームワークをインストールする必要があります。 Slim の最新バージョンは Composer を通じてインストールできます。ターミナルを開いて、

Java Apache Camel: 柔軟で効率的なサービス指向アーキテクチャの構築 Feb 19, 2024 pm 04:12 PM

Apache Camel は、異種のアプリケーション、サービス、データソースを簡単に統合して、複雑なビジネスプロセスを自動化できる Enterprise Service Bus (ESB) ベースの統合フレームワークです。 ApacheCamel はルートベースの構成を使用して、統合プロセスを簡単に定義および管理します。 ApacheCamel の主な機能は次のとおりです。柔軟性: ApacheCamel は、さまざまなアプリケーション、サービス、データソースと簡単に統合できます。 HTTP、JMS、SOAP、FTP などの複数のプロトコルをサポートします。効率: ApacheCamel は非常に効率的で、大量のメッセージを処理できます。非同期メッセージングメカニズムを使用しているため、パフォーマンスが向上します。拡張可能

ルーティングを使用して Vue プロジェクトでページ切り替えアニメーション効果をカスタマイズするにはどうすればよいですか? Jul 21, 2023 pm 02:37 PM

ルーティングを使用して Vue プロジェクトでページ切り替えアニメーション効果をカスタマイズするにはどうすればよいですか?はじめに: Vue プロジェクトでは、ルーティングはよく使用する機能の 1 つです。ページ間の切り替えはルーティングを通じて実現でき、優れたユーザーエクスペリエンスを提供します。ページの切り替えをより鮮やかにするには、アニメーション効果をカスタマイズすることで実現できます。この記事では、ルーティングを使用して Vue プロジェクトでページ切り替えアニメーション効果をカスタマイズする方法を紹介します。 Vue プロジェクトの作成まず、Vue プロジェクトを作成する必要があります。 VueCLI を使用して迅速にビルドできます

PHPでルーティングルールを柔軟に設定する実装方法と体験まとめ Oct 15, 2023 pm 03:43 PM

PHP におけるルーティングルールの柔軟な構成の実装方法と経験のまとめはじめに: Web 開発において、ルーティングルールは URL と特定の PHP スクリプトの対応関係を決定する非常に重要な部分です。従来の開発方法では、通常、ルーティングファイルにさまざまな URL ルールを設定し、その URL を対応するスクリプトパスにマップします。ただし、プロジェクトの複雑さが増し、ビジネス要件が変化するにつれて、各 URL を手動で構成する必要がある場合、非常に煩雑で柔軟性が低くなります。では、PHPでどのように実装するかというと、

JavaScript 関数を使用して Web ページのナビゲーションとルーティングを実装する Nov 04, 2023 am 09:46 AM

最新の Web アプリケーションでは、Web ページのナビゲーションとルーティングの実装は非常に重要な部分です。 JavaScript 関数を使用してこの関数を実装すると、Web アプリケーションをより柔軟でスケーラブルで使いやすいものにすることができます。この記事では、JavaScript 関数を使用して Web ページのナビゲーションとルーティングを実装する方法を紹介し、具体的なコード例を示します。 Web ページナビゲーションの実装 Web アプリケーションの場合、Web ページナビゲーションはユーザーが最も頻繁に操作する部分です。ユーザーがページをクリックしたとき

ルーティングを使用して Vue でページジャンプを実装するにはどうすればよいですか? Jul 21, 2023 am 08:33 AM

ルーティングを使用して Vue でページジャンプを実装するにはどうすればよいですか?フロントエンド開発テクノロジーの継続的な開発により、Vue.js は最も人気のあるフロントエンドフレームワークの 1 つになりました。 Vue 開発において、ページジャンプは重要な部分です。 Vue はアプリケーションのルーティングを管理するための VueRouter を提供しており、ルーティングを通じてページ間のシームレスな切り替えを実現できます。この記事では、ルーティングを使用して Vue でページジャンプを実装する方法をコード例とともに紹介します。まず、Vue プロジェクトに vue-router プラグインをインストールします。

uniappでのルートの動的追加・削除方法 Dec 17, 2023 pm 02:55 PM

Uniapp は、Vue.js をベースにしたクロスエンドフレームワークです。ワンタイムライティングをサポートし、H5、ミニプログラム、APP などのマルチエンドアプリケーションを同時に生成します。パフォーマンスと開発効率に細心の注意を払っています。開発プロセス。 Uniapp では、ルートの動的な追加と削除は開発プロセス中によく遭遇する問題であるため、この記事では、Uniapp でのルートの動的な追加と削除を紹介し、具体的なコード例を示します。 1. ルートの動的追加ページのロード時またはユーザーの操作後に、実際のニーズに応じてルートを動的に追加できます。

Vue.js vs. React：プロジェクト固有の考慮事項 Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

See all articles