vue 2ルートの基本的な使い方の実例分析

5299 ワード

vue 2 ルート

本論文の実例は、Vue 2ルートの基本的な使い方を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
Vue-routerは、Vue.jsにルーティング管理を提供するプラグインであり、hashの変化を利用して動的コンポーネントの切り替えを制御する。以前のページ間ジャンプは後端MVCのController層によって制御されていました。「a」タブのhrefまたは直接location.hrefを修正することによって、サービス側に要求を行います。サービス側が応答したら、受信した情報に基づいてデータを取得し、対応するテンプレートを割り当て、HTMLをレンダリングしてブラウザに戻ります。Vue.js+Vue-routerの組み合わせはこの論理を先端に置いて実行し、対応するコンポーネントに切り替えてからバックエンドにデータを要求し、テンプレートに充填して、ブラウザ側でHTMLのレンダリングを完了します。これは後端分離にも役立ち、先端は後端の論理に依存せず、後端がデータインターフェースを提供するだけでよい。
引用の仕方:
HTMLで直接scriptタグで導入すればいいです。例えば、


<script src="<%=request.getContextPath()%>/lib/vue-router.js"></script>

注意：vueの導入はvue-routerの前に置くべきです。でないと、vue-routerは機能しません。
基本的な使い方：
この記事はブックstrapのスタイルに合わせてケースを作り、ナビゲーションバーを実現し、異なるページをクリックして実現します。


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>routerTest1</title>
  <c:import url="importFile.jsp"></c:import>
</head>
<body>
<div id="app">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#" rel="external nofollow" >Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <%--       --%>
          <li class="active"> <router-link to="/home">Home</router-link></li>
          <li> <router-link to="/list">List</router-link></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <!―      template       -->
    <router-view></router-view>
  </div>
</div>

<script type="x-template" id="modalTel">
  <div>
    <h1> this is home page </h1>

  </div>

</script>
<script>

  /*
   * var Home = Vue.extend({
   template:'<h1> this is home page </h1>',
   })
   * */
  /*  Javascrip       */
  var Home = Vue.extend({
    template:'#modalTel'
  })

  /*       */
  const router = new VueRouter({
    routes:[
        /*      */
      { path: '/', redirect: '/home' },
      {
        path:'/home',
        component:Home,

      },
      {
        path:'/list',
        component:{
          /*         */
          template:'<h1> this is list page----{{$route.path}}</h1>'
        }
      }
    ]
  });
  const app = new Vue({
    router:router
  }).$mount('#app')
</script>
</body>
</html>

import File.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>    </title>
  <link href="<%=request.getContextPath()%>/frame/bootstrap-3.1.1/css/bootstrap.css" rel="external nofollow" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
  <script src="<%=request.getContextPath()%>/lib/vue-router.js"></script>
  <script src="<%=request.getContextPath()%>/lib/jquery.min.js"></script>
  <script src="<%=request.getContextPath()%>/frame/bootstrap-3.1.1/js/bootstrap.min.js"></script>

 
</head>
<body>

</body>
</html>

これで運行全体が成功しました。

このようにして、簡単なルーティングの例が完成されます。
ルートオブジェクト:
Vue−routerを使用してアプリケーションを起動すると、各マッチングしたコンポーネントのインスタンスにrouterのオブジェクトが注入され、ルーティングオブジェクトと称される。コンポーネントの内部では、this.$routeで呼び出すことができます。
ルートオブジェクトには以下の属性が含まれています。
1.$route.path
タイプは文字列で、現在ルーティングされている絶対パスのようなものです。
2.$route.params
タイプはオブジェクトです。ルーティングにおける動的なフラグメントと完全に一致するフラグメントのキーパッドのペアが含まれます。上記の例のように／list／：pageパスは、this.route.params.pageのように経路上のpageの値を取得することができる。
3.$route.query
タイプはオブジェクトです。ルートで照会するパラメータのキーパッドのペアが含まれます。例えば/list/1sort=createTimeは、this.$route.query.sortでcreateTimeを得ることができます。
4.$route.router
すなわち、ルーティングの例は、そのgoを呼び出すことによって、replace方法にジャンプすることができる。コンポーネントの例では、ルーティング・インスタンスに直接的にアクセスするためにthis.$routerを呼び出すこともできる。routerの具体的な属性およびapi方法を7.1.10ルーティング・インスタンスで説明する。
5.$route.matched
6.$route.name
タイプは文字列で、現在のルートに設定されているname属性です。
ここで述べたように、皆さんのvue.jsプログラムの設計に役に立ちます。

vue 2ルート方式--入れ子ルートの実現方法の分析

Ajaxは、restfulインターフェースを呼び出し、Json形式のデータを転送する方法です。