自己看vue文檔，難免有些地方不懂，自己整理一下，主要是vue-router具體實現的操作步驟。

安裝

直接下載/CDN

Unpkg.com提供了基于 NPM 的 CDN 鏈接。上面的鏈接會一直指向在 NPM 發布的最新版本。你也可以像

在 Vue 后面加載 vue-router，它會自動安裝的：

NPM

npm install vue-router

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 標簽，則無須如此(手動安裝)。

#基礎

開始

HTML:

Hello App!

Go to Foo

Go to Bar

顯示的當前路由的內容

實現路由的跳轉

JavaScript：

// 0. 如果使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter)

// 1. 定義(路由)組件。

// 可以從其他文件 import 進來

const Foo = { template: '

foo' }

const Bar = { template: '

bar' }

// 2. 定義路由

// 每個路由應該映射一個組件。 其中"component" 可以是

// 通過 Vue.extend() 創建的組件構造器，

// 或者，只是一個組件配置對象。

// 我們晚點再討論嵌套路由。

const routes = [

{ path: '/foo', component: Foo },

{ path: '/bar', component: Bar }

]

// 3. 創建 router 實例，然后傳 `routes` 配置

// 你還可以傳別的配置參數, 不過先這么簡單著吧。

const router = new VueRouter({

routes // (縮寫)相當于 routes: routes

})

// 4. 創建和掛載根實例。

// 記得要通過 router 配置參數注入路由，

// 從而讓整個應用都有路由功能

const app = new Vue({

router

}).$mount('#app')

// 現在，應用已經啟動了！

當 對應的路由匹配成功，將自動設置 class 屬性值 .router-link-active

步驟：

1.在main.js中引入vue-router

import Vue from 'vue'

import VueRouter from 'vue-router'

2.在main.js中使用這個router插件

Vue.use(VueRouter)

3.生成這個router實例

export default new Router(){

routes:[

{

path:'/',

name:'home',

component:Home

},{

path:'/list',

name:'list',

component:List

}

]

}

4.在index.js中把路由實例傳遞給Vue根組件

import router from './router'

new Vue({

el:'#app',

router,

template:'',

components:{ APP }

})

靜態路由

靜態配置的 ---> import ....

固定路徑路由的配置

{

path:'/',

name:'home',

component:Home

},{

path:'/list',

name:'list',

component:List

}

動態路由匹配

只有動態路由可以做到分頁的效果

{

path:'/list/:id',

name:'list',

component:List

}

list.vue

{{title}}

return {

title:""

}

}

export default{

mounted(){

if(this.$route.params.id == 1){

//請求第一頁數據

this.title="第一頁"

}

if(this.$route.params.id == 2){

//請求第二頁數據

this.title="第二頁"

}

}

}

接收多個個參數

index.js

{

path:'/list/:id/name/:name',

name:'list',

component:List

}

list.vue

{{title}}{{name}}

return {

title:"",

name:""

}

}

export default{

mounted(){

//結構賦值寫法

const {name,id} = this.$route.params;

this.name = name;

//this.name = this.$route.params.name;

if(this.$route.params.id == 1){

//請求第一頁數據

this.title="第一頁"

}

if(this.$route.params.id == 2){

//請求第二頁數據

this.title="第二頁"

}

}

}

傳遞不同參數 顯示不同數據

項目應用：詳情頁

watch 響應路由參數的變化

監聽路由的變化

watch:{

'$route'(to,from){

this.name = to.params.name;

}

}

在2.2中引入守衛( beforeRouteUpdate)

守衛 --> 鉤子函數

beforeRouteUpdate (to, from, next) {

this.name = to.params.name;

next();//走到下一個鉤子

}

嵌套路由

頭部左側不變只有內容區改變 這樣的需求可以用嵌套路由來做

{

path:'/list',

name:'list',

component:List,

childeren:[{

path:'a',

component:A

}]

}

再引入一個A組件 A.vue

在list.vue組件中通過，顯示A組件的內容

在一個非app組件里面寫顯示的是當前路由下子組件的內容

編程式的導航

除了來創建a標簽來定義導航鏈接，還可以借助router的實例方法

router.push(location,onCompelte?,onAbort?)

在Vue實例內部，可以通過$route訪問路由實例，因此你可以調用this.$route.push

想要導航到不同的URL，則使用router.push方法。這個方法會向history棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的URL。

當你點擊時，這個方法會在內部調用，所以說，

點擊 ---> 聲明式

等同于

調用router.push(...) --->編程式

可以在Header組件中跳轉到list中

export defalut{

methods:{

handleClick(){

this.$router.push({

name:'list'

})

}

}

}

可以在Header組件中跳轉到list/123中

export defalut{

methods:{

handleClick(){

this.$router.push({

//一種方式

//path:'/list/123',

//2種方式

name:'list'

params:{

id:123

}

})

}

}

}

使用router.push 或者 router.replace 里面都不能讓path和params同時存在

//字符串

router.push('home');

//對象

router.push({path:'home'})

//命名的路由

router.push({name:'user',params:{userId:123}})

//帶查詢參數，變成/register?plan=private

router.push({path:'register',query:{plan:'private'}})

router.replace

和router.push唯一的不同就是，不會向history添加新紀錄，而是替換掉當前的history記錄不能返回

router.go

命名路由

定義名字跳轉

命名視圖

var app = new VueRouter({

routers:[{

path:'/',

componens:{

defaults:Foo,

a:Bar,

b:Baz

}

}]

})

重定向和別名

訪問/abc 重定向到/根路徑

{

path:'/abc',

redirect:'/'

}

訪問/bieming 實際上還是訪問的根路徑

{

path:'/',

name:'home',

component:Home,

alias:'/bieming'

}

路由組件傳參

解耦

動態路由傳id

{

path:'/list/:id',

name:'list',

component:List,

props:true

}

在list.vue中

可以直接通過props['id']獲取數據

{{id}}

props['id']

}

對象模式

props:{name:"dell"}

一般是寫死的字符串靜態數據

函數模式

index.js

{

path:'/list/:id',

name:'list',

component:List,

props : (route)=>({

query:route.query.q

id:route.params.id

})

}

list.vue

{{query}}{{id}}

props['query','id']

}

我的博客即將搬運同步至騰訊云+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=1rr2npw3kickj

總結

以上是生活随笔為你收集整理的vue 路由id_vue路由详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。