Vue-Router（vue路由）

在web開發(fā)中，"router"是指根據(jù)url分配到對應(yīng)的處理程序

//vue


//vue-router

npm install vue-router

    
Hello App!
    

        
        
        
        Go to Foo
        Go to Bar
    
    
    
    

注意，如果使用模塊化編程。就需要導(dǎo)入vue和VueRouter，在js中調(diào)用 Vue.use(VueRouter)

div id="app">
    
Hello App!
    

        Go to Foo

        Go to Bar

        user
        
    
    

JAVASCRIPT

onst Foo = { template: "
foo
" }
    const Bar = { template: "
bar
" }
    const User = {template:`
        

            
user
            {{$route.params.name}}
        
`
    }

    const routes = [
        { path: "/foo", component: Foo },
        { path: "/bar", component: Bar },
        {
            path:"/user",
            component:User,
            children:[
                {
                    path:":name"http://動態(tài)路徑參數(shù)以冒號開頭
                }
            ]
        }
    ]
    const router = new VueRouter({
        routes
    })
    const app = new Vue({
        el:"#app",
        router
    })

借助 vue-router，使用嵌套路由配置，就可以很簡單地表達組件中的層級關(guān)系

實際上，在上面的動態(tài)路由的例子中就已經(jīng)使用了嵌套了，定義路由時添加一個　children 屬性即可：

const routes=[
    {
        path:"/user",
        component:User,
        children:[
            {
                path:":name",
                component:{
                    template:"
pureview
"
                }
            }
        ]
    }
]

< router-view >標簽在模板中會被渲染為一個< a >標簽來進行鏈接，其實，也可以使用 "router.push()" 來實現(xiàn)導(dǎo)航

該方法的參數(shù)可以是一個字符串路徑，或者一個描述地址的對象。例如：

// 字符串
router.push("home")

// 對象
router.push({ path: "home" })

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

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: "register", query: { plan: "private" }})

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

這個方法的參數(shù)是一個整數(shù)，意思是在 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)

路由組件是可以進行命名的，在執(zhí)行鏈接或者跳轉(zhuǎn)頁面時就會比較方便。命名的方式也很簡單，給routes一個name屬性就OK了

var router=new VueRouter({
    routes:[
        {
            path:"/home",
            name:"homePage",
            component:Home
        }
    ]
})

要鏈接到一個命名路由，可以給 router-link 的 to 屬性傳一個對象：

Home

有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有 sidebar（側(cè)導(dǎo)航） 和 main（主內(nèi)容） 兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個多帶帶命名的視圖，而不是只有一個多帶帶的出口。如果 router-view 沒有設(shè)置名字，那么默認為 default。

HTML

    

        
視圖一
        
    
    

        
視圖二
        
    

JAVASCRIPT

var Foo={
    template:"
內(nèi)容一
"
}
var Bar={
    template:"
內(nèi)容二
"
}
var routes=[
    {
        path:"/",
        components:{
            one:Foo,
            two:Bar
        }
    }
]
var router=new VueRouter({
    routes
})

重定向的意思就是當你訪問 a 的時候，url 會被替換為 b ，于是匹配路由 b

重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

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

意思就是當我們訪問 b 的時候，路由匹配為 a ，但是url地址不變

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

vue-router 提供的導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在路由導(dǎo)航發(fā)生時執(zhí)行鉤子：全局的, 單個路由獨享的, 或者組件級的。

你可以使用 router.beforeEach 注冊一個全局的 before 鉤子：

router .beforeEach((to,from,next)=>{
    //...
})

鉤子函數(shù)的三個參數(shù)：

to: Route: 即將要進入的目標 路由對象

from: Route: 當前導(dǎo)航正要離開的路由

next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認的）。

next(false): 中斷當前的導(dǎo)航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應(yīng)的地址。

next("/") 或者 next({ path: " / " }): 跳轉(zhuǎn)到一個不同的地址。當前的導(dǎo)航被中斷，然后進行一個新的導(dǎo)航。

做一個小例子：

做了一個簡單的頁面，設(shè)定了一個登陸狀態(tài)，如果 isLogin 為false，那么點擊賬戶中心，則跳轉(zhuǎn)到登陸頁進行登陸

如果 isLogin 為true，則顯示賬戶中心的內(nèi)容：

鉤子函數(shù)代碼

router.beforeEach((to, from, next) => {
    var isLogin = true ;
    if(to.path == "/user"&&!isLogin){
        next("/login")
    }else{
        next();
    }
})

貼上完整代碼大家可以直接復(fù)制試一試

    

        首頁
        關(guān)于我們
        賬戶中心
        登錄
    
    

定義路由的時候可以配置 meta 字段：

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

那么如何訪問這個 meta 字段呢？

首先，我們稱呼 routes 配置中的每個路由對象為 路由記錄。路由記錄可以是嵌套的，因此，當一個路由匹配成功后，他可能匹配多個路由記錄。

例如，根據(jù)上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄。

一個路由匹配到的所有路由記錄會暴露為 $route 對象（還有在導(dǎo)航鉤子中的 route 對象）的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

下面例子展示在全局導(dǎo)航鉤子中檢查 meta 字段：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 此路由需要驗證，檢查是否登錄
    // 如果不需要，則重定向到登錄頁面。
    if (!auth.loggedIn()) {
      next({
        path: "/login",
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 確保一定要調(diào)用 next()
  }
})