路由，對於大多數單頁面應用，都推薦使用官方支援的 vue-router 庫。更多細節可以看 vue-router 文件https://router.vuejs.org/。以下為簡單實現路由的程式碼： 寫html       <div class="tab-item">         <router-link to="/one">第一個路由</router-link>//to="/one"為，當點選時，跳轉到/one路徑下的檔案       </div>       <div class="tab-item">         <router-link to="/tow">第二個路由</router-link>       </div>       <div class="tab-item">         <router-link to="/three">第三個路由</router-link>       </div> 書寫js

import Vue from 'vue'//引入vue import VueRouter from 'vue-router'//引入vue路由元件 import one from 'one.vue' import two from 'two.vue' import three from 'three.vue'

Vue.use(VueRouter)//使用路由元件

export default new VueRouter ({     routes: [         {             path: '/one',//對應html中的to="/one"路徑             component: one//跳轉到one元件下         },         {             path: '/tow',             component: tow         },         {             path: '/three',             component: three         },         {             path: '/',//重定向路由,即當開啟頁面時，重定向到哪個路徑下             redirect: '/one'         }     ] })

動態路由匹配 我們經常需要把某種模式匹配到的所有路由，全都對映到同個元件。例如，我們有一個 User 元件，對於所有 ID 各不相同的使用者，都要使用這個元件來渲染。那麼，我們可以在 vue-router 的路由路徑中使用“動態路徑引數”(dynamic segment) 來達到這個效果： html: <div id="app">   <p>     <router-link to="/user/foo">/user/foo</router-link>     <router-link to="/user/bar">/user/bar</router-link>   </p>   <router-view></router-view> </div> js: const router = new VueRouter({   routes: [     // 動態路徑引數 以冒號開頭     { path: '/user/:id', component: User }   ] })

一個“路徑引數”使用冒號 : 標記。當匹配到一個路由時，引數值會被設定到 this.$route.params，可以在每個元件內使用。於是，我們可以更新 User 的模板，輸出當前使用者的 ID：

const User = {   template: '<div>User：{{ $route.params.id }}</div>'//當點選/user/foo時，輸出User:foo。點選/user/bar時，輸出User:bar }

巢狀路由 我們經常將動態路由和巢狀路由共同使用,巢狀路由即是在原路由的基礎上增加一個 children ,children 是一個數組.並且我們還需要在原來的元件上新增< router-view >來渲染 chlidren 裡面的路由。例項：

html <div id="app">   <p>     <router-link to="/user/foo">/user/foo</router-link>     <router-link to="/user/foo/profile">/user/foo/profile</router-link>     <router-link to="/user/foo/posts">/user/foo/posts</router-link>   </p>   <router-view></router-view> </div>

js 定義模板 const User = {   template: `     <div class="user">       <h2>User {{ $route.params.id }}</h2>       <router-view></router-view>     </div>   ` }

const UserHome = { template: '<div>Home</div>' } const UserProfile = { template: '<div>Profile</div>' } const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({   routes: [     { path: '/user/:id', component: User,       children: [         { path: '', component: UserHome },//預設匹配的路徑         { path: 'profile', component: UserProfile },//當點選/user/foo/profile。匹配到id為profile時，跳轉UserProfile模板         { path: 'posts', component: UserPosts }//當點選/user/foo/posts。匹配到id為profile時，跳轉UserPosts模板       ]     }   ] })

const app = new Vue({ router }).$mount('#app')

程式設計式的導航 除了使用 <router-link> 建立 a 標籤來定義導航連結，我們還可以藉助 router 的例項方法，通過編寫程式碼來實現。

#router.push(location, onComplete?, onAbort?) 注意：在 Vue 例項內部，你可以通過 $router 訪問路由例項。因此你可以呼叫 this.$router.push。

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

當你點選 <router-link> 時，這個方法會在內部呼叫，所以說，點選 <router-link :to="..."> 等同於呼叫 router.push(...)。

宣告式：<router-link :to="...">    程式設計式：router.push(...) 該方法的引數可以是一個字串路徑，或者一個描述地址的物件。例如：

// 字串 router.push('home')

// 物件 router.push({ path: 'home' })

// 命名的路由 router.push({ name: 'user', params: { userId: 123 }})

// 帶查詢引數，變成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 注意：如果提供了 path，params 會被忽略，上述例子中的 query 並不屬於這種情況。取而代之的是下面例子的做法，你需要提供路由的 name 或手寫完整的帶有引數的 path：

const userId = 123 router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 這裡的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user 同樣的規則也適用於 router-link 元件的 to 屬性。例項：

import Vue from 'vue' import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>This is Home</div>' } const Foo = { template: '<div>This is Foo</div>' } const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }

const router = new VueRouter({   mode: 'history',   base: __dirname,   routes: [     { path: '/', name: 'home', component: Home },     { path: '/foo', name: 'foo', component: Foo },     { path: '/bar/:id', name: 'bar', component: Bar }   ] })

new Vue({   router,   template: `     <div id="app">       <h1>Named Routes</h1>       <p>Current route name: {{ $route.name }}</p>       <ul>         <li><router-link :to="{ name: 'home' }">home</router-link></li>         <li><router-link :to="{ name: 'foo' }">foo</router-link></li>         <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>       </ul>       <router-view class="view"></router-view>     </div>   ` }).$mount('#app')

路由介紹就告一段落了，來看看檢視 命名檢視，有時候想同時（同級）展示多個檢視，而不是巢狀展示，例如建立一個佈局，有 sidebar（側導航） 和 main（主內容） 兩個檢視，這個時候命名檢視就派上用場了。你可以在介面中擁有多個單獨命名的檢視，而不是隻有一個單獨的出口。如果 router-view 沒有設定名字，那麼預設為 default。

    <router-view></router-view>     <router-view></router-view> 當我們的檢視如上時,我們會發現每一個路由被渲染了兩次,所以我們需要為檢視命名

    <router-view name="a"></router-view>     <router-view name="b"></router-view> var Foo = { template: '<div>foo</div>' } var Bar = { template: '<div>bar</div>' } var routes = [         {             path:"/one",             name:"one",             components:{                 a:Foo,                 b:Bar             }         },     ]