路由監聽：

//當一個元件被複用的時候，那麼路由發生變化，但是頁面上面的資料不會發生變化
新建one.vue 元件 作為home的子元件，在home.vue 中寫遍歷渲染頁面 ，並用params傳參，
one中 因為created只執行了一次，就接收都第一次傳的值，所以需要監聽

方案：

1、watch :{ "$route"(to,from){ this.name = to.params.name ; } }
to 中有params 屬性，有name 和 id
from （從哪來，上一次點選的記錄）

路由守衛 2、路由守衛1 !!!

beforeRouteUpdate(to,from,next){ this.name = to.params.name ;next() }
to 中params 屬性 有name 和id
next() 必加，to

3、路由守衛2 !!! 離開時

beforeRouteLeave(to,from,next){ var flag = confirm("您確定要離開嗎") if（flag）{ next（） }}
confirm 中，點選確定為true，取消為false；next必須

4、路由守衛3 ！！！ 進入時

訪問不到this，因為進入前 元件沒有匯入。呼叫next函式
beforeRouteEnter(to,from,next){
// 訪問不到this，因為進入前元件沒有匯入，需要用到next
next((vm)=>{
// 通過ajax的success 接收後臺傳來的 登入狀態
let flag = false;
if(!flag){
vm.$router.push("/login");
}else{
next();
} }

全域性守衛：index.js 中

const router = new Router{ ... }
//驗證使用者的登入狀態
router.beforeEach(to,from,next){
let flag = false;
//需要全域性守衛的路由的name
let routers = ["find","order","my"]
//
if(routers.indexOf(to.name)>=0){
if(!falg){
router.push("/login")
}else{
next();
}
}else{
next();
}
}

export default router
index.js 中匯出router