gitHub地址：https://github.com/huangpna/vue_learn/example里面的lesson14
安裝
直接引入：
<script src="vue.js"></script> <script src="vue-router.js"></script>
vue-router下載鏈接：點擊復制代碼
NPM下載：
npm install vue-router
如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能：
在你的文件夾下的 src 文件夾下的 main.js 文件內寫入以下代碼
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
入門
先簡單寫一個例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index1</title> </head> <body> <div id="app"> <h1>HELLO APP!</h1> <p> <router-link to="/foo">to foo</router-link> <router-link to="/bar">to bar</router-link> </p> <router-view></router-view> </div> </body> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script> <script> const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' }
//配置路由 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ];
//實現路由實例化 const router = new VueRouter({ routes });
//掛載到Vue的實例上 const app = new Vue({ router }).$mount('#app'); </script> </html>
<router-link> 默認會被渲染成一個 <a> 標簽 >> to=" " 為我們定義的路由
<router-view> 路由匹配到的組件將渲染在這里
------上述例子實現效果可拷貝代碼在本地查看。
動態路由匹配
我們經常需要將具有給定模式的路線映射到同一個組件。例如，我們可能有一個User應該為所有用戶呈現但具有不同用戶ID的組件。在vue-router我們可以在路徑中使用動態段以實現：
栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index2</title> </head> <body> <div id="app2"> <p> <router-link to="/user/1">to 用戶一</router-link> <router-link to="/user/2">to 用戶二</router-link> </p> <router-view></router-view> </div> </body> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script> <script> const user = { template: '<div>{{$route.params.id}}</div>' }; const routes = [ { path: '/user/:id', component: user} ]; const router = new VueRouter({ routes }); const app = new Vue({ router }).$mount('#app2'); </script> </html>
動態段由冒號表示:。匹配路徑時，動態段的值將this.$route.params在每個組件中公開。
除此之外$route.params，該$route對象還公開了其他有用的信息，例如$route.query（如果URL中有查詢）$route.hash等。您可以在API參考中查看完整的詳細信息。
------上述例子實現效果可拷貝代碼在本地查看。
嵌套路由
我們經常將動態路由和嵌套路由共同使用,嵌套路由即是在原路由的基礎上增加一個 children ,children 是一個數組.並且我們還需要在原來的組件上添加< router-view >來渲染 chlidren 里面的路由.
栗子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index3</title> <style> #app3>p>a{ padding:5px 10px; } .router-link-exact-active{ background-color: darkslateblue; border-radius: 4%; color:#FFF; } </style> </head> <body> <div id="app3"> <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> </body> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script> <script> const user = { template: ` <div> <h1>User {{$route.params.id}}</h1> <router-view></router-view> </div> ` }; const userHome = { template: '<div>userHome</div>' }; const userProfile = { template: '<div>userProfile</div>' }; const userPosts = { template: '<div>userPosts</div>' }; const routes = [ { path: '/user/:id', component: user, children: [ { path: '', //通過上述配置，當您訪問時/user/foo，內部User的任何內容都不會呈現，因為沒有子路徑匹配。也許你確實希望在那里渲染一些東西。在這種情況下，您可以提供一個空的子路徑路徑 component: userHome }, { path: 'profile', component: userProfile }, { path: 'posts', component: userPosts } ] } ]; const router = new VueRouter({ routes }); const app3 = new Vue({ router }).$mount('#app3'); </script> </html>
------上述例子實現效果可拷貝代碼在本地查看。
程序化導航
除了使用<router-link>為聲明性導航創建錨標簽之外，我們可以使用路由器的實例方法以編程方式執行此操作。
router.push(location)
想要導航到不同的 URL，則使用 router.push 方法。這個方法會向 history 棧添加一個新的記錄，所以，當用戶點擊瀏覽器后退按鈕時，則回到之前的 URL。
當你點擊 <router-link> 時，這個方法會在內部調用，所以說，點擊 <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' }})
下述router.replace跟 router.push 很像，唯一的不同就是，它不會向 history 添加新記錄，而是跟它的方法名一樣 ——而是替換掉當前的 history 記錄。
router.replace(location)
router.go這個方法的參數是一個整數，意思是在 history 記錄中向前或者后退多少步，類似 window.history.go(n)。
// 在瀏覽器記錄中前進一步，等同於 history.forward() router.go(1) // 后退一步記錄，等同於 history.back() router.go(-1) // 前進 3 步記錄 router.go(3) // 如果 history 記錄不夠用，那就默默地失敗唄 router.go(-100) router.go(100)
命名路由
有時我們通過一個名稱來標識一個路由顯得更方便一些，特別是在鏈接一個路由，或者是執行一些跳轉的時候。你可以在創建 Router 實例的時候，在 routes 配置中給某個路由設置名稱。
我們直接在路由下添加一個 name 即可.
var routes = [ { path:"/one", name:"one", component:{template:"#a"} }, { path:"/two", name:"two", component:{template:"#b"}, }, ]
要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：
<router-link :to="{ name: 'one', params: { userId: 123 }}">User</router-link>
<router-link :to="{ name: 'two'}">User</router-link>
另外以編程的方式實現以上效果可使用router.push()
router.push({ name: 'user', params: { userId: 123 }})
路由傳參獲取：
this.$route.params.userId
命名視圖
有時您需要同時顯示多個視圖而不是嵌套它們，例如創建具有sidebar視圖和main視圖的布局。這就是命名視圖派上用場的地方。您可以擁有多個並為每個插座指定一個名稱，而不是在您的視圖中只有一個插座。router-view沒有名字的A 將default作為其名稱。
<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>
通過使用組件呈現視圖，因此多個視圖需要同一路徑的多個組件。確保使用components（帶有s）選項：
const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })
栗子：鏈接
嵌套命名視圖
栗子：鏈接
重定向和別名
重定向：
重定向也在routes配置中完成。要重定向/a到/b：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
栗子：鏈接
重定向也可以定位到命名路線：
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })
栗子：鏈接
別名
/a的別名是/b，意味着，當用戶訪問/b時，URL會保持/b，但是路由匹配為/a，就像用戶訪問/a一樣。
對應的路由配置為：
const router = new VueRouter({ routes: [ { path: '/a', component:A, alias: '/b' } ] })
別名的功能讓我們可以自由地將ui結構映射到任意的URL, 而不是受限於配置的嵌套路由結構。