用 Vue.js + vue-router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你要把 vue-router 添加進來，我們需要做的是，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。
路由的基本實現
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 實現當前 路由導航高亮 */ .router-link-exact-active, .router-link-active { color: red; font-size: 30px; } </style> </head><body> <div id="app"> <!-- 路由的入口，也就是a標簽 --> <router-link to="/home">home</router-link> <router-link to="/about">about</router-link> <!-- 指定頁面中路由的出口，也就是：路由匹配組件將來展示在頁面中的位置 --> <router-view></router-view> </div> <script src="./vue.js"></script> <!-- 引入 路由插件 --> <script src="./node_modules/vue-router/dist/vue-router.js"></script> <script> /* 路由的使用步驟： 1 引入 路由插件的js文件 2 創建幾個組件 3 通過 VueRouter 來創建一個路由的實例，并且在參數中配置好路由規則 4 將 路由實例 與 Vue實例關聯起來，通過 router 屬性 5 在頁面中使用 router-link 來定義導航（a標簽） 路由路口 6 在頁面中使用 router-view 來定義路由出口（路由內容展示在頁面中的位置） */ // Vue中的路由是：哈希值 和 組件的對應關系 // component 方法能夠返回一個對象，用這個對象就可以表示當前組件 const Home = Vue.component('home', { template: `<h1>這是 Home 組件</h1>` }) const About = Vue.component('about', { template: `<h1>這是 About 組件</h1>` }) // 配置路由規則 const router = new VueRouter({ // 通過 routes 來配置路由規則，值：數組 routes: [ // 數組中的每一項表示一個具體的路由規則 // path 用來設置瀏覽器URL中的哈希值 // componet 屬性用來設置哈希值對應的組件 { path: '/home', component: Home }, { path: '/about', component: About }, // redirect 重定向: 讓當前匹配的 / ,跳轉到 /home 對應的組件中, 也就是默認展示: home組件 { path: '/', redirect: '/home' } ] }) var vm = new Vue({ el: '#app', // Vue的配置對象中有一個配置項叫做：router // 用來指定當前要使用的路由 // router: router router }) </script></body></html>重定向
解釋：將 / 重定向到 /home
{ path: '/', redirect: '/home' }路由導航高亮
說明：當前匹配的導航鏈接，會自動添加router-link-exact-active router-link-active類
路由參數
// 鏈接：<router-link to="/user/1001">用戶 Jack</router-link><router-link to="/user/1002">用戶 Rose</router-link>// 路由：{ path: '/user/:id', component: User }// User組件：const User = { template: `<div>User {{ $route.params.id }}</div>`}嵌套路由 - 子路由
// 父組件：const User = Vue.component('user', { template: ` <div class="user"> <h2>User Center</h2> <router-link to="/user/profile">個人資料</router-link> <router-link to="/user/posts">崗位</router-link> <!-- 子路由展示在此處 --> <router-view></router-view> </div> `})// 子組件：const UserProfile = { template: '<h3>個人資料：張三</h3>'}const UserPosts = { template: '<h3>崗位：FE</h3>'}{ path: '/user', component: User, // 子路由配置： children: [ { // 當 /user/profile 匹配成功， // UserProfile 會被渲染在 User 的 <router-view> 中 path: 'profile', component: UserProfile }, { // 當 /user/posts 匹配成功 // UserPosts 會被渲染在 User 的 <router-view> 中 path: 'posts', component: UserPosts } ]}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
