序文
前回のブログでは中VUEの研究ノート（9）VUE-CLIを通信コンポーネントコンテンツ、我々は通信部品関連するコンテンツやコミュニケーションのいくつかのマイナーな練習コンポーネントを学び、私たちは組立通信におけるVUE-CLIをマスターしていると信じて、そしてこのブログは私がいることを言及しているルートの知識についての真実を言う、次のレベルに行くことができますwebstormビルドVUE-CLIプロジェクトの使用このブログの最後の例はルートについて少し知識があるが、しかし、その時だけ私は小さなケースを作って、このブログを見て、その後、知識をルーティングVUE詳細に説明します！
本章の目的
- Vueのルータの簡単な紹介を学びます
- VUEルーティング方法質量参加を学びます
- 戦闘を渡すパラメータVUEルーティングを学びます
Vueのルータはじめに
VUEルータは、VUEプラグインコアでVue.js公式ルート・マネージャです。単一ページのアプリケーション風構築するので、それVue.jsとの統合の中核深さ、。VUE単一ページのアプリケーションは、に基づいて、コンポーネント、一緒にアクセスパスマップおよびコンポーネントを設定するためのルーティングパスをルーティングされます。ハイパーリンク付きの伝統的なアプリケーションページでは、ページの切り替えやジャンプを実装します。単一ページのアプリケーションでVUEルータは、それがパス、すなわちスイッチアセンブリとの間で切り替えられます。機能は次のとおりです。
- ネストされたルーティング/テーブルビュー
- モジュラー、コンポーネントベースのルーティングの設定
- ルーティングパラメータ、クエリ、ワイルドカード
- ビュートランジション効果Vue.js遷移システムに基づきます
- ファイングレインコントロールナビゲーション
- 自動アクティベーションリンクでのCSSクラス
- HTML5過去のパターンやハッシュモード、IE9自動降格
- スクロールバーの挙動の定義ので、
リソース
中国のヘルプ：https://router.vuejs.org/zh/
英語のヘルプ：https://router.vuejs.org/
Gitのソース：https://github.com/vuejs/vue-router
VUEルータその後、私たちは一つ一つを紹介されている3つの重要な概念、ルート、ルート、ルータがあります。
- 訪問者に代わって、ルートのアドレスであるルート、。
- ルートセット経路であり、経路は、アレイを形成するために組み合わされます。
- ルータは、例えば、ルーティングを管理するため、管理者へのメカニズムと同等である：仮定私たちは何をするかクエリデータへのボタンのニーズをクリックしてください？ルータのその後の仕事、それは、探しに行くために、ルーティング対応するクエリデータを検索し、その後、ページ上に配列を返されたルート。
- クライアントのルートは、実際には、DOM要素と隠さを示しています。ホームページの内容は、ときにすべての隠され、その逆に関するコンテンツが表示されます。クライアントは、次の2つの方法で実装ルーティング：ハッシュベースのHTML5ヒストリーAPIに基づい。
次に、我々はこれらの2つの方法がVUE-ルータのVUE-ルータとVUE-CLIバージョンのWebバージョンを使用している使用して、二つの方法でVUE-ルータを達成するために使用します
Webバージョン
ダウンロード/ CDN
https://unpkg.com/vue-router/dist/vue-router.js
NPMに基づくUnpkg.comは、CDNのリンクを提供します。上記のリンクは常にNPMのリリースの最新バージョンを指します。また、タグまたはhttps://unpkg.com/[email protected]/dist/vue-router.jsなどのバージョン番号を指定することができます。
NPM
パッケージマネージャはnodejsを使用してインストール
NPMショックルータを設置
あなたは、モジュラープロジェクトでそれを使用している場合、それは（Vue.useに合格しなければならない）明示的にインストールルーティング機能
「ショック」からインポートビュー
「衝撃ルータ」からインポートVueRouter
Vue.use（VueRouter）
Vue.js + Vueのルータと1ページのアプリケーションを作成し、それは非常に簡単です。私たちが入って来、私たちが行う必要があるあなたはVueのルータを追加する場合、コンポーネントを組み合わせることにより、コンアプリケーションにできている使用Vue.jsは、コンポーネント（部品）がルート（ルート）にマッピングされ、その後、どこVueのルータをレンダリングするように指示されています彼ら
<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < タイトル>のWebバージョンVUE-ルータ</ タイトル> </ ヘッド> < 身体> < divの上記のid = "アプリケーション" > < H1の> {{MSG}} </ H1の> <！ - ナビゲートするためにアセンブリのルータリンクを使用して- > <！ - 属性は渡すことで、リンクを指定するには、- > <！- アセンブリのデフォルトのレンダリングタグにルータリンク- > < ルータリンクへ= "/ foo"という>はFoo </ ルータリンク> < ルータリンクへ= "/バー" >バー</ ルータリンク> <！ - ルーティングアウトレット- > <！ - ルートここでのレンダリングにマッチした- > < ルータービュー> </ ルータービュー> </ divの> < スクリプトSRC = "https://unpkg.com/vue/dist/vue.js" > </ スクリプト> < スクリプトSRC =「HTTPS：// unpkg。COM / VUE-ルータ/ DIST / VUE-router.js」 > </ スクリプト> < スクリプト> // 1.アセンブリ定義 CONST FOO = {テンプレート' FOO </ H1の>である成分>の<H1 ' } CONSTバー= {：テンプレート' </ H1>であるアセンブリ>バーの<H1 ' } // 2.ルートが定義 ルートCONST = [ { パス：' / FOO ' 、 コンポーネント：FOO、 名前：FOOを }、 { パス：' /バー' 、 コンポーネント：バー、 名前：バー } ] //3.ルータ定義 CONSTルータ= 新しい新しいVueRouter（{ ルート // 等価経路：経路 }） // 4.ルート・インスタンスを作成し、マウント VM CONST = 新しい新しいヴュー（{ EL：' #app ' 、 // 要素をマウント データ：{ MSG：' ウェブ・ルータVUEの' }、 ルーター：ルーター }） </ スクリプト> </ ボディ> </ HTML >
結果：
私たちは、初心者や説明の必要性として、簡単なルーティングスイッチが達成されたが、私たちの将来の発展はほとんどこの方法で使用されていない見ることができます
ステップ分析：
- JSが導入され、要素を搭載し
- 定義コンポーネント定義ルートおよび各ルートを管理、ルートコンポーネントに対応することができるが、例えば、実施例/ FOOのFOOの相当にアセンブリ/アセンブリのバーに対応するバー
- 各ルートに対応する要求情報を処理するために、ルータを定義します
注：<ルータビュー> </ルータビュー>このタグは、ラベルVUE-ルータが失敗していない場合は、特に重要です。
VUE-cliのバージョン
それから私は、後に開発中で一般的な方法ですVUE-CLIバージョンVUE-ルータの使用、であなたを取りますよ
インストール：
ショックルータNPMインストール
糸アドオンショック-ルータを
どちらの方法は、任意にいずれかを選択することができます
VUE-CLIの建設、尋ねる「nstallをVUE-ルータ」（もしインストールVUE-ルータ）の時点で、「Y」を選択した場合は、ここでインストールVUE-ルータを繰り返さないでください。使用WebStormは、ルータを使用することを選択し、VUE-CLIプロジェクトを作成します。
（1）/ SRC /コンポーネント/ TEST03新しい四つの成分、すなわちIndexComponent.vue、HomeComponent.vue、DefaultComponent.vue、AboutComponent.vue、新しいディレクトリ構造は以下の通りであります：
（2）対応するコードの対応する構成要素を記述
IndexComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "IndexComponent",
data(){
return{
msg:'这是index组件'
}
}
}
</script>
<style scoped>
</style>
HomeComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "HomeComponent",
data(){
return{
msg:'这是home组件'
}
}
}
</script>
<style scoped>
h1{
color: red;
}
</style>
AboutComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "AboutComponent",
data(){
return{
msg:'这是about组件'
}
}
}
</script>
<style scoped>
h1{
color: green;
}
</style>
DefaultComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "DefaultComponent",
data(){
return{
msg:'这是default组件'
}
}
}
</script>
<style scoped>
h1{
color: pink;
}
</style>
(3)自定义router并在main.js注册
其实我们可以自定义router,自定义的router和原来的router都差不多，我们/src/router新建一个test.js并编写对应的代码
test.js
import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/test03/IndexComponent' import Home from '@/components/test03/HomeComponent' import Default from '@/components/test03/DefaultComponent' import About from '@/components/test03/AboutComponent' Vue.use(Router) export default new Router({ routes:[ { path:'/', component:Index, name:Index }, { path:'/home', component:Home, name: Home }, { path:'/about', component:About, name:About }, { path:'/default', component:Default, name:Default } ] })
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue'
// import router from './router' //这个是最开始的路由
import router from './router/test' //修改原来的路由，换成自己定义的路由 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: {}, template: '' })
修改之后IndexComponent.vue
<template>
<div>
<h1>{{msg}}</h1>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/default">Default</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "IndexComponent",
data(){
return{
msg:'这是index组件'
}
}
}
</script>
<style scoped>
</style>
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue_01</title> </head> <body> <div id="app"> <!--对应的组件内容渲染到router-view中--> <router-view></router-view> </div> <!-- built files will be auto injected --> </body> </html>
(4)测试结果
vue-router两种方式的使用我已经讲解完成了，写得如此详细，想必大家都可以看得懂。
路由模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载
http://localhost:8080/#/home
如果不想要很hash，可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面
const router = new VueRouter({ mode: 'history', routes: [...] }
当使用 history 模式时，URL 就像正常的 url
http://localhost:8080/home
test.js
import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/test03/IndexComponent' import Home from '@/components/test03/HomeComponent' import Default from '@/components/test03/DefaultComponent' import About from '@/components/test03/AboutComponent' Vue.use(Router) export default new Router({ mode:'history', routes:[ { path:'/', component:Index, name:Index }, { path:'/home', component:Home, name: Home }, { path:'/about', component:About, name:About }, { path:'/default', component:Default, name:Default } ] })
结果：
不过这种模式需要后台配置支持。如果后台没有正确的配置，当用户在浏览器直接访问 http://site.com/user/id 就会返回 404，详细请参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html
vue路由的传参方式
vue路由传参实战