第一步在.vue元件裡新增標籤，格式如下

<div id="app">
<p>
    <!-- 使用 router-link 元件來導航. -->
    <!-- 通過傳入 `to` 屬性指定在main.js檔案設定的別名連結，如/1 -->
    <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/1">Go to Foo</router-link>
</p>
<!-- 路由出口 -->
 

<!-- 點選<router-link>的時候指定的頁面將渲染在這裡 -->
<router-view></router-view>
</div>

第二步在main.js檔案裡配置路由，格式如下

import VueRouter from 'vue-router'

// 1. 定義（路由）元件。
// 載入元件
import Page01 from './max'

Vue.use(VueRouter)
//全域性安裝路由功能

// 2. 定義路由
// 每個路由應該對映一個元件。 
const routes = [
  { path: '/1', component: Page01 } 
  //前面to指定的地方 path  /1
 

]

// 3. 建立 router 例項，然後傳 `routes` 配置
const router = new VueRouter({
  routes
})

// 4. 建立和掛載根例項。
// 記得要通過 router 配置引數注入路由，
// 從而讓整個應用都有路由功能
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
})

// 現在，就可以重啟試試了！

注意 routes 和 router 是不一樣的單詞，別眼花了

路由就是這麼的簡單！

第二種方法：

<div class="st">
<!-- <router-link to="/newPage">指向主頁面跳轉</router-link><br/> -->
<!-- 點選<router-link>的時候指定的頁面將渲染在這裡 -->
<router-view></router-view>
<div class="usern" @click="naveTO">DIV跳轉</div><br/>
</div>
 
export default{

methods : {  naveTO(){//頁面跳轉
console.log("DIV跳轉");
 if ('/newPage' === -1) {
window.history.back()
return
}
if (/^javas/.test('/newPage') || !'/newPage') return
const useRouter = typeof '/newPage' === 'object' || (this.$router && typeof '/newPage' === 'string' && !/http/.test('/newPage'))
if (useRouter) {
this.$router.push({path: '/newPage'})
} else {
window.location.href = '/newPage'
}    
}

然後是在父元件裡向子元件裡傳值，格式如下