用 Vue.js + vue-router 創(chuàng)建單頁應(yīng)用，是非常簡單的。使用 Vue.js ，我們已經(jīng)可以通過組合組件來組成應(yīng)用程序，當(dāng)你要把 vue-router 添加進(jìn)來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。

成都創(chuàng)新互聯(lián)公司長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為久治企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站制作，久治網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

路由的基本實現(xiàn)

 
 
 
 
  



 

  
  home
  about

  
  
 

 
 
 
 

重定向

解釋：將 / 重定向到 /home

{ path: '/', redirect: '/home' }

路由導(dǎo)航高亮

說明：當(dāng)前匹配的導(dǎo)航鏈接，會自動添加router-link-exact-active router-link-active類

路由參數(shù)

• 說明：我們經(jīng)常需要把某種模式匹配到的所有路由，全都映射到同一個組件，此時，可以通過路由參數(shù)來處理
• 語法：/user/:id
• 使用：當(dāng)匹配到一個路由時，參數(shù)值會被設(shè)置到 this.$route.params
• 其他：可以通過 $route.query 獲取到 URL 中的查詢參數(shù) 等

// 鏈接：
用戶 Jack
用戶 Rose

// 路由：
{ path: '/user/:id', component: User }

// User組件：
const User = {
 template: `
User {{ $route.params.id }}
`
}

嵌套路由 - 子路由

• Vue路由是可以嵌套的，即：路由中又包含子路由
• 規(guī)則：父組件中包含 router-view，在路由規(guī)則中使用 children 配置

// 父組件：
const User = Vue.component('user', {
 template: `
  

   
User Center
   個人資料
   崗位
   
   
  
  `
})

// 子組件：
const UserProfile = {
 template: '
個人資料：張三
'
}
const UserPosts = {
 template: '
崗位：FE
'
}

{ path: '/user', component: User,
 // 子路由配置：
 children: [
  {
   // 當(dāng) /user/profile 匹配成功，
   // UserProfile 會被渲染在 User 的  中
   path: 'profile',
   component: UserProfile
  },
  {
   // 當(dāng) /user/posts 匹配成功
   // UserPosts 會被渲染在 User 的  中
   path: 'posts',
   component: UserPosts
  }
 ]
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。