npm安裝vue-router


Vue.use(VueRouter)全域性安裝路由功能
定義路徑陣列routes並建立路由物件router

將router物件傳到Vue物件中
在根元件中使用<router-link>定義跳轉路徑
在根元件中使用<router-view>來渲染元件
建立子元件

路由的安裝
npm安裝

npm install vue-router --save

路由的簡單實現
main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import Page01 from './components/page01'
import Page02 from './components/page02'

Vue.use(VueRouter)//全域性安裝路由功能
//定義路徑
const routes = [
  { path: '/', component: Page01 },
  { path: '/02', component: Page02 },
]
//建立路由物件
const router = new VueRouter({
  routes
})

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

 

App.vue

<template>
  <div id="app">
    <router-link to="/">01</router-link>
    <router-link to="/02">02</router-link>
    <br/>
    <router-view></router-view>
  </div>
</template>

page01.vue

<template>
  <div>
    <h1>page02</h1>
  </div>
</template>
 

page02.vue

<template>
  <div>
    <h1>page02</h1>
  </div>
</template>

路由的跳轉
router-link標籤用於頁面的跳轉，簡單用法我們剛才提到過了。

<router-link to="/page01">page01</router-link>

點選這個router-link標籤router-view就會渲染路徑為/page01的頁面。
注意：router-link預設是一個<a>標籤的形式，如果需要顯示不同的樣子，可以在router-link標籤中寫入不同標籤元素，如下顯示為button按鈕。
<router-link to="/04"> <button>to04</button> </router-link>

router.push

// 字串
router.push('home')
// 物件
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 帶查詢引數，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

那麼問題來了，如果是全域性註冊的路由Vue.use(VueRouter)，應該怎麼寫呢？