vue-router2.0クイックコピー

vue-routerはvue公式に提供されているルーティングフレームワークであり、SPAを作るのが容易になります.本稿ではvue-router 2を用いる.0は、簡単に書き写すことができるプロトタイプを提供し、簡単に1ページのアプリケーションを手に入れることができます.
仮にSPAを1つ作って、全部で2つのページを作って、ホーム、aboutに分けて、そしてナビゲーションのURLを提供して、クリックした後にそれぞれこの2つのページを切り替えて、デフォルトのページはホームです.では
まず,開発環境を初期化する.vue-cliツールを使用してvueエンジニアリング足場を作ります.vue-cliがまだインストールされていない場合は、まず:

npm install -g vue-cli

足場の作成:

vue init webpack vuetest

次の操作を行います.

cd vuetest
npm i 
npm run dev

コマンドラインがブラウザウィンドウを自動的に開き、デフォルトのvueテンプレート化UIが表示されます.現在のコマンド実行を閉じます(ctrl+cを使用します).次に、依存をインストールする必要があります.

npm i vue-router --save

デフォルトのmainを次のように置き換える.jsファイル:

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

import VueRouter from 'vue-router'
Vue.use(VueRouter)

const Home = { template: '
home page
' }
const About = { template: '
about page
' }
const router = new VueRouter({
  routes :[
      { path: '/home', component: Home },
      { path: '/about', component: About },
      { path: '/', redirect: '/home' }
  ]
})
new Vue({
  el: '#app',
  template: '',
  router: router,
  components: { App }
})

appの代わりに次のコードを使用する.vueファイルの内容:

再実行

npm run dev

見たページには2つのリンクがあり、この2つのリンクをクリックすると、SPA内でページを切り替えることができます.
Bingo!.
について
作者:劉伝君
製品を作成し、事業を創出したことがある.読書が好きで,何を求めているのか.1000 copy#gmailを通過することができる.com連絡して
出品
bootstrap小書https://www.gitbook.com/book/...http小書http://www.ituring.com.cn/boo...Git小書http://www.ituring.com.cn/boo...