Vue-router(vue路由基礎詳解)

Vue.js路由(Vue-router)

安裝

直接引入

<script src="vue.js"></script>
<script src="vue-router.js"></script>

vue-router下載連接
https://unpkg.com/vue-router/...

npm下載

npm install vue-router

若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能：
在你的文件夾下的 src 文件夾下的 main.js 文件內寫入如下代碼

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

Vue.use(VueRouter)

開始

引入Vue和VueRouter插件

<script src="vue.js"></script>
<script src="vue-router.js"></script>

書寫html

<div id="box"> 

</div>
<!--定義模版-->
<template id="a">
    <div>
        第一個router
    </div>
</template>
<template id="b">
    <div>
        第二個router
    </div>
</template>

書寫js

var routes = [
    {
        path:"/one",

        component:{template:"#a"}
    },
    {
        path:"/two",
        component:{template:"#b"}
    },
];
// 定義路由組件
var router = new VueRouter({
    routes
});
// 定義路由
new Vue({
    el:"#box",
    router
});
// 建立和掛載實例

將模版增添連接

<div id="box"> 
    <router-link to="/one">One</router-link>
    <router-link to="/two">Two</router-link>
    <router-view></router-view>
</div>

< router-link > 默認會被渲染成一個 <a> 標籤 >>>to=""爲咱們定義的路由

< router-view > 路由匹配到的組件將渲染在這裏

動態路由匹配

咱們常常須要把某種模式匹配到的全部路由，全都映射到同個組件。例如，咱們有一個 User 組件，對於全部 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，咱們能夠在 vue-router 的路由路徑中使用『動態路徑參數』（dynamic segment）來達到這個效果：

{
    path:"/two:id",
    component:{template:"#b"},
},

當咱們在地址後面直接添加任意字符,咱們會發現文檔內容隨着咱們的更改而改變.

嵌套路由

咱們常常將動態路由和嵌套路由共同使用,嵌套路由便是在原路由的基礎上增長一個 children ,children 是一個數組.而且咱們還須要在原來的組件上添加< router-view >來渲染 chlidren 裏面的路由.

<template id="b">
    <div>
        第二個router
        <router-view>
                
        </router-view> 
    </div>
</template>
<template id="c">
    <div>
        user:{{ $route.params.id }}
    </div>
</template>

{
    path:"/two",
    component:{template:"#b"},
    children:[
        {
            path:":id",
            component:{
                template:"#c"
            }
        }
    ]
},

這樣咱們就能夠這樣添加地址

編程式導航

除了使用 <router-link> 建立 a 標籤來定義導航連接，咱們還能夠藉助 router 的實例方法，經過編寫代碼來實現。

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(location)

跟 router.push 很像，惟一的不一樣就是，它不會向 history 添加新記錄，而是跟它的方法名同樣 —— 替換掉當前的 history 記錄。

router.go(n)

這個方法的參數是一個整數，意思是在 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'}">User</router-link>
<router-link :to="{ name: 'two'}">User</router-link>

命名視圖

有時候想同時（同級）展現多個視圖，而不是嵌套展現，例如建立一個佈局，有 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
            }
        },
    ]

重定向和別名

重定向

重定向(Redirect)就是經過各類方法將各類網絡請求從新定個方向轉到其它位置,用於網站調整或網頁被移到一個新地址,它也是經過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

var router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

別名

/a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持爲 /b，可是路由匹配則爲 /a，就像用戶訪問 /a 同樣。簡單的說就是給 /a 起了一個外號叫作 /b ,可是本質上仍是 /a

上面對應的路由配置爲：

var router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

『別名』的功能讓你能夠自由地將 UI 結構映射到任意的 URL，而不是受限於配置的嵌套路由結構。