【狂神説Java】vue学習ノート09----vue-routerルーティング

説明
勉強するときは、できるだけ公式の文書を開くようにします.
 Vue RouterはVueです.js公式のルーティングマネージャ.Vueとjsのコア深度統合により、単一ページアプリケーションの構築が容易になります.以下の機能があります.

ネストされたルーティング/ビューグラフ

モジュール化コンポーネントベースのルーティング構成

ルーティングパラメータ、クエリー、ワイルドカード

Vue js遷移システムに基づくビュー遷移効果

細粒度のナビゲーション制御

自動アクティブCSS class付きリンク

HTML 5履歴モードまたはhashモードは、IE 9において

を自動的に降格する.

カスタムスクロール動作

インストール
第1のvue-cliに基づいてテスト学習を行う.まずnode modulesにvue-router vue-routerが存在するかどうかを確認します.そのため、n pm/cn pmでインストールする必要があります.コマンドラインツールを開き、プロジェクトディレクトリに入り、次のコマンドを入力します.

npm install vue-router --save-dev

モジュール化されたエンジニアリングで使用する場合は、Vueを通過する必要があります.use()ルーティング機能を明確にインストールする:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

テスト
1、まず役に立たないものを削除する2、componentsディレクトリの下に私たちが自分で書いたコンポーネントを保存する3、Content.vueのコンポーネントを定義する

<template>
	<div>
		<h1>   h1>
	div>
template>

<script>
	export default {
		name:"Content"
	}
script>

Main.vueコンポーネント

	<template>
	<div>
		<h1>  h1>
	div>
template>

<script>
	export default {
		name:"Main"
	}
script>

4、ルートをインストールして、srcディレクトリの下で、新しいフォルダを作ります:router、ルートを保存して、ルートindexを配置します.js,以下

import Vue from'vue'
//      
import Router from 'vue-router'
//         
import Content from '../components/Content'
import Main from '../components/Main'
//    
Vue.use(Router) ;
//    
export default new Router({
	routes:[
		{
			//    
			path:'/content',
			//    
			name:'content',
			//     
			component:Content
			},{
			//    
			path:'/main',
			//    
			name:'main',
			//     
			component:Mian
			}
		]
	});

5.main.jsにルートを配置する

import Vue from 'vue'
import App from './App'

//             
import router from './router'//           

//             
Vue.config.productionTip = false;

new Vue({
	el:"#app",
	//    
	router,
	components:{App},
	template:''
});

6.App.vueでルートを使用する

<template>
	<div id="app">
		
		<router-link to="/">  router-link>
		<router-link to="/content">  router-link>
		<router-view>router-view>
	div>
template>

<script>
	export default{
		name:'App'
	}
script>

<style>style>