vue-router ルーティングとページ間のナビゲーションの詳細な説明

vue-router は Vue.js の公式ルーティング プラグインであり、vue.js と緊密に統合されており、シングルページ アプリケーションの構築に適しています。 Vue の単一ページ アプリケーションは、ルーティングとコンポーネントに基づいています。ルーティングは、アクセス パスの設定と、パスとコンポーネントのマップに使用されます。従来のページ アプリケーションは、いくつかのハイパーリンクを使用してページの切り替えとジャンプを実現します。 vue-router シングルページ アプリケーションでは、パス間の切り替え、つまりコンポーネントの切り替えを行っています。

vue-router

ルーティングでは、アクセスされた一連のアドレス ルールが定義されており、ルーティング エンジンはこれらのルールの一致に基づいて、対応する処理ページを見つけて、そのページにリクエストを転送して処理することがわかっています。すべてのバックエンド開発がこれを行うと言えますが、フロントエンドのルーティングには「リクエスト」のようなものはありません。

フロントエンドルーティングは、アドレスが一致するコンポーネントまたはオブジェクトを見つけてレンダリングすることです。サーバーにリクエストを送信せずにブラウザのアドレスを変更する方法は 2 つあります。1 つは、アドレスに # を追加してブラウザを欺く方法です。もう 1 つは、ページ内ナビゲーションを使用することです。 HTML5 の window.history 関数。URL ハッシュを使用して完全な URL をシミュレートします。

vue-router は、公式に提供されている専用のルーティング ツール ライブラリのセットです。

の vue.use() を通じて vue インスタンスに導入する必要があります。 -cli でプロジェクトを作成した後、vue を使用します (vue-router は初期化中に y を確認します)

まずプロジェクト src の構造を見てみましょう。cmd を通じてプロジェクト src ディレクトリに入り、tree -f &gt を実行します。 ; list.txt code> 構造ツリーを生成します (list.txt に保存されます):

構造は次のとおりです: tree -f > list.txt 生成结构树（保存在list.txt中）：

结构如下：

src
├─assets // 静态资源
│ └─image // 图片
│  
├─components // 组件 
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router // 路由配置
│ └─index.js
│ 
│ App.vue // 默认程序入口
│ main.js
│

1、打开main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App)　
})

第10行将配置的路由绑定到vue实例上，第11行在vue实例中使用render方法来绘制这个vue组件(App)完成初始化

Render是vue2新增的具有特色的方法，为了得到更好的运行速度，vue2也采用的类似react的Virtual Dom（虚拟Dom）

2、然后我们在components中注册几个组件

3、打开router/index.js配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注册router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader // 路由中指定组件
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

路由的模式

关键词："mode"，"history模式"，"hash模式"，"Abstract模式"

我们可以在创建的Router中使用模式，如参数mode:history的参数，这个值意思是使用history

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

1. :

 <router-link :to="{ name:&#39;BookDetails&#39;，params:{ id:1 } }">
  //...
 </router-link>

2. 次に、コンポーネントにいくつかのコンポーネントを登録します

• 3. router/ を開きますIndex.js ルーティングを構成する




•  export default {
   created () {
    const bookID = this.$router.params.id
   }
   }

  ログイン後にコピー

  ログイン後にコピー

ルーティング モード

パラメータ mode:history など、作成された Router でモードを使用できます。この値は、history モードを使用することを意味します。このモードで十分です。 .pushState API は、ページをリロードせずに URL ジャンプを完了するために使用されます

、ランクにアクセスするときのルートは次のようになります: http://localhost/#rank

• これはヒストリーモードとハッシュモードの違いです。さらに、抽象モードがあります

• ハッシュ: URLのハッシュ値をルーティングとして使用します

要約: ノードサーバーなど、すべての JavaScript 実行環境をサポートします。ブラウザ API がないことが判明した場合、ルーティングは強制的にこのモードになります

ルーティングとナビゲーション

vue -router が提供する 2 つのコマンド タグ コンポーネントがこのナビゲーションと自動レンダリング ロジックを処理します:

- パスに一致するコンポーネント ビューをレンダリングします。ルーティング関数のアプリケーションでは

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

 <router-link :to="{ name:&#39;BookDetails&#39;，params:{ id:1 } }">
  //...
 </router-link>

 export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

 routes: [
 { path: '/a', redirect: '/b' }
 ]
// 重定向的目标也可以是一个命名的路由
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]