vue.jsを直接参照してルーティングを利用する方法-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

vue.jsを直接参照してルーティングを利用する方法

coldplay.xixi

Dec 17, 2020 pm 02:30 PM

ルーティング

vue.js でルーティングを使用する方法を直接引用します: 最初に [vue.JS] と [vue-router.JS] を導入し、次にマウントされた dom 要素を作成し、ルーティングコンポーネントを作成し、次にルーティングを定義します。そしてルーターインスタンスを作成し、最後に vue インスタンスを作成してマウントします。

vue.jsを直接参照してルーティングを利用する方法

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

[おすすめ関連記事: vue.js]

ルーティングを使用して vue.js を直接引用:

vue.js を直接導入することでルーティングを使用するのは非常に簡単です。別の vue-router.JS.

具体的な実装手順:

1、vue.JS と vue-router.JS を導入します

<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">
</script>

ログイン後にコピー

2、マウントされた dom 要素を作成します

<div id="app"></App>

ログイン後にコピー

3、ルーティングコンポーネントを作成します

const com1 = {
template: &#39;<div > 路由 1</div>&#39;
}
const com2 = {
template: &#39;<div > 路由 2</div>&#39;
}

ログイン後にコピー

4 、ルートを定義します

const routes = [
   { path: &#39;/hash1&#39;, component: com1 },
   { path: &#39;/hash2&#39;, component: com2 }
]

ログイン後にコピー

5、ルーターインスタンスを作成します

const router = new VueRouter({
   routes
})

ログイン後にコピー

6、vueインスタンスを作成してマウントします

const App = new Vue({
  router
}).$mount(&#39;#app&#39;);

ログイン後にコピー

具体的なコードは次のとおりです:

<!DOCTYPE HTML>
<HTML>
  
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
      Document
    </title>
    <script src="https://unpkg.com/vue/dist/vue.js">
    </script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">
    </script>
  </head>
  
  <body>
    <div id="app">
      <h1>
        Hello !
      </h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/hash1">
          切换至 com1
        </router-link>
        <router-link to="/hash2">
          切换至 com2
        </router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view>
      </router-view>
      <!-- router-link 上的其他属性: -->
      <!-- 设置 replace 属性的话, 当点击时, 会调用 router.replace() 而不是 router.push(), 导航后不会留下
      history 记录. -->
      <!-- <router-link :to="{ path:&#39;/abc&#39;}" replace></router-link> -->
      <!-- 有时候想要 <router-link> 渲染成某种标签, 例如 <li>. 于是我们使用
      tag prop 类指定何种标签, 同样它还是会监听点击, 触发导航. -->
      <!-- <router-link to="/foo" tag="li">foo</router-link> -->
      <!-- active-class 设置 链接激活时使用的 CSS -->
      <!-- event 声明可以用来触发导航的事件. 可以是一个字符串或是一个包含字符串的数组. -->
    </div>
  </body>
  <script>
    // 1. 定义 (路由) 组件.
    const com1 = {
      template: &#39;<div > 路由 1</div>&#39;
    }
    const com2 = {
      template: &#39;<div > 路由 2</div>&#39;
    }
    // 2. 定义路由
    // 每个路由应该映射一个组件. 其中 "component" 可以是 通过 Vue.extend()
    //  创建的组件构造器, 或者, 只是一个组件配置对象.
    const routes = [{
      path: &#39;/hash1&#39;,
      component: com1
    },
    {
      path: &#39;/hash2&#39;,
      component: com2
    }]
    // 3. 创建 router 实例, 然后传 `routes` 配置
    const router = new VueRouter({
      routes // (缩写)相当于 routes: routes
    })
    // 4. 创建和挂载根实例.
    // 要通过 router 配置参数注入路由, 从而让整个应用都有路由功能
    const App = new Vue({
      router
    }).$mount(&#39;#app&#39;); //el 是自动挂载, mount 是手动挂载(延时)
    
  </script>
 
</HTML>

ログイン後にコピー

関連する学習に関する推奨事項: js ビデオチュートリアル

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

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

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

ホットツール

ホットトピック

Java チュートリアル

1657

CakePHP チュートリアル

1415

Laravel チュートリアル

1309

PHP チュートリアル

1257

C# チュートリアル

1230

Related knowledge

Windows 11/10でインターネットセキュリティがない問題を修正する方法 May 11, 2023 pm 10:07 PM

Windows 11/10 コンピューターで見られるインターネット接続関連の問題の 1 つは、「インターネットがありません。安全です」というエラーメッセージです。基本的に、このエラーメッセージは、システムがネットワークに接続されているものの、接続の問題により Web ページを開いてデータを受信できないことを示します。 Windows のネットワークに接続しているとき、できれば近くにない WiFi ルーターを介してインターネットに接続しているときに、このエラーが発生することがあります。通常、システムトレイの右下隅にあるワイヤレスアイコンを確認すると、小さな黄色の三角形が表示され、それをクリックすると、「インターネットなし、セキュリティ」というメッセージが表示されます。このエラーメッセージが表示される特別な理由はありませんが、構成設定の変更によりルーターが接続できなくなる可能性があります。

NTP タイムサーバーエラーによるルーターの接続喪失を修正する 3 つの方法 May 22, 2023 pm 03:43 PM

接続と WiFi の問題は非常にイライラし、生産性が大幅に低下する可能性があります。コンピュータは、クロック同期にネットワークタイムプロトコル (NTP) を使用します。すべてではないにしても、ほとんどの場合、ラップトップは NTP を使用して時間を追跡します。 NTP タイムサーバーエラーメッセージが原因でサーバーとの接続が失われた場合は、この記事を最後まで読んで修正方法を確認してください。ルーターの時刻が正しく設定されていない場合はどうなりますか?通常、ルーターのパフォーマンスは間違った時刻設定によって影響を受けないため、接続は影響を受けない可能性があります。ただし、いくつかの問題が発生する可能性があります。ルーターをローカルタイムサーバーとして使用するすべてのガジェットの時刻が正しくありません。ルーターのログデータのタイムスタンプが間違っています。のせいなら

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 は非常に効率的で、大量のメッセージを処理できます。非同期メッセージングメカニズムを使用しているため、パフォーマンスが向上します。拡張可能

ThinkPHP6 でルーティングを使用する方法 Jun 20, 2023 pm 07:54 PM

ThinkPHP6 は、URL ルーティング設定を簡単に実装できる便利なルーティング機能を備えた強力な PHP フレームワークであり、同時に GET、POST、PUT、DELETE などのさまざまなルーティングモードもサポートしています。この記事では、ThinkPHP6 を使用してルーティング設定を行う方法を紹介します。 1. ThinkPHP6 ルーティングモードの GET メソッド: GET メソッドはデータを取得するためのメソッドであり、ページの表示によく使用されます。 ThinkPHP6 では、次のものが使用できます。

iPhoneのWiFiが繰り返し切断される問題を修正する方法[解決済み] May 20, 2023 pm 01:55 PM

多くの iPhone ユーザーは、iPhone で直面している深刻な問題の 1 つに対して失望を表明しています。問題は、iPhone が時々 Wi-Fi から切断されることです。 iPhone でほとんどのアプリを使用するには Wi-Fi が必須であるため、これは確かに大きな問題です。私たちはこの問題を徹底的に分析し、原因と考えられる要因を特定し、以下にリストしました。自動参加設定が無効になっているネットワーク設定の一部の問題 Wi-Fi パスワードの変更 Wi-Fi ルーターの問題の変更上記のこれらの要因を調査した後、Wi-Fi 問題 iPhone の切断問題を解決できる一連の解決策をまとめました。解決策 1 – Wi-Fi が有効になっていない場合は、Wi-Fi の自動接続設定をオンにする

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

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

Windows 11 で WiFi パスワードを検索または表示する 4 つの方法 Apr 23, 2023 pm 01:19 PM

Windows 11 で WiFi パスワードを見つける: それは簡単ですか?はい、以下に説明する方法のいずれかを使用して、Windows 11 で保存した WiFi パスワードを簡単に表示できます。特定のデバイスに保存されている WiFi パスワードを表示するには、管理者権限が必要です。さらに、場合によっては、WPS を使用してルーターとペアリングされたデバイスに、復号化されたパスワードが表示されない場合があります。 Windows 11 で WiFi パスワードを 4 つの簡単な方法で表示する方法 Windows 11 で保存した WiFi パスワードを表示する方法は次のとおりです。好みや要件に基づいて、以下のいずれかの方法に従ってください。方法 1: コントロールパネルを使用して WiFi パスワードを表示する

See all articles

vue.jsを直接参照してルーティングを利用する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック