Vue router路由使用

1、建立路由

import vue from 'vue'import vuerouter from 'vue-router'

//1 註冊外掛程式
vue.use(vuerouter)
const routes =[
, ,
children: [,,
]},},}
]//2 建立路由
const router = new
vuerouter()
//3 匯出路由 然後再入口檔案 進行註冊
export 
default router

import vue from 'vue'import vuerouter from 'vue-router'const home = () => import('../components/home')

const about = () => import('../components/about')
const profile = () => import('../components/profile')
const homenews = () => import('../components/homenews')
const homemessage = () => import('../components/homemessage')
vue.use(vuerouter)
const routes =[
, ,
children: [,,
]},},}
]const router = new
vuerouter()
export 
default router

首頁

關於

4、路由跳轉

關於

5、路由傳參有2中方式   params和query

5.1 params傳遞  分為幾步     

第一步： 配置路由格式   （這裡的id並不是唯一，你也可以為其定義aaa，bbbb等等 都可以）

path: '/about/:id',

component: about,

效果如下：

而且我們也可以在關於當前頁面拿到這個id  格式如下：

}

export 
default

this

.$router.push(
})

Vue router路由2 0的使用

ps 我的第乙個vue專案是用vue router 0.7.3 版本，如今公升級成webpack使用vue router 2.x 版本不會用了，找了好多論壇，總結出了幾個方法 直接上乾貨 首先是router.js檔案 import vue from vue import router from vu...

vue router路由的基本使用

import vue from vue import vuerouter from vue router 使用第三方外掛程式要用vue.use 這裡主要呼叫了vuerouter中的install方法，vuerouter註冊了兩個全域性元件 router link,router view,可以直接用 ...

vue router路由守衛基本使用

通過路由攔截，來判斷使用者是否登入，該頁面使用者是否有許可權瀏覽 全域性前置守衛 路由跳轉前呼叫 跳轉到指定路由，此處 寫法錯誤，會造成死迴圈直到瀏覽器棧溢位，呼叫next 的同時也會執行多一次beforeeach 正確寫法是先判斷要離開的路由是什麼再跳轉 router.beforeeach to,...