Vue ノート（3）：SPAとVueルーター

7344 ワード
Vue.js vue-cli Vue.js テキストリンク

サーバー側とクライアント側のルーティング

1.サーバー側ルーティング
クライアントはURLが変更されるたびにサーバーにリクエストを送信するため、これを「サーバー側ルーティング」と呼びます。

2.クライアント側ルーティング
ルーティングはJavaScriptを使用してブラウザー自体で行われます。Webページは1つのindex.htmlページから読み込まれ、クライアント側のルーティングを使用して、クリックされたリンクに応じて、さまざまなビューを動的に表示できます。多くの場合、表示する必要のあるビューはすでにブラウザーにロードされているため、サーバーにアクセスする必要はありません。

3.単一ページのアプリケーション（SPA）
1つのHTMLをロードして，ユーザーインタラクションに応じて動的にページを更新するWebアプリケーションです。ただし、単一ページアプリケーションを使用している場合は、コンテンツ間を移動する方法（クライアント側ルーティング）が必要です。

Vueルーター

配置場所：

/router/index.js


import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    //URLの観点から、実際のルートを示します
    path: "/",
    //ルートを参照するためにアプリケーション全体でその名前を使用する
    name: "Home",
    //ルートでレンダリングするためにどのコンポーネントを指定する
    component: Home
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

App.vue

<router-link></router-link>

router-link: 特定のルートにリンクすることを目的とする（vue-routerライブラリの）コンポーネントです。そして本質的には、コンポーネントのコンテンツがページにレンダリングされるプレースホルダーです。

router-view: router-linkで指定されたコンポーネントが表示されている場所に読み込まれます。
例えば、リンク/aboutをクリックしたら、views/App.vueの内容が「router-view」のところに表示されます


<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{name:'Home'}">Home</router-link>
      <router-link :to="{name:'About'}">About</router-link>
    </div>
    <router-view />
  </div>
</template>

redirectとエイリアス

要件:/aboutを/about-usへ変更しましたが、/aboutで同じく変更前のコンテンツにアクセスするできるようにしたい。

ソリューション１：redirect


  {
    path: "/about-us",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },
  {
    path:"/about",
    redirect:{name:"About"}
  }

ソリューション2：エイリアス


{
    path: '/about-us',
    name: 'About',
    component: About,
    alias:'/about'
  }

ユーザーは/aboutと/about-usに移動すると、同じコンテンツを取得したりできます。

Automakeツールの使用
学習ノート<1>