Vue-Router（vue路由）

在web開(kāi)發(fā)中，"router"是指根據(jù)url分配到對(duì)應(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://動(dòng)態(tài)路徑參數(shù)以冒號(hào)開(kāi)頭
                }
            ]
        }
    ]
    const router = new VueRouter({
        routes
    })
    const app = new Vue({
        el:"#app",
        router
    })

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

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

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

< router-view >標(biāo)簽在模板中會(huì)被渲染為一個(gè)< a >標(biāo)簽來(lái)進(jìn)行鏈接，其實(shí)，也可以使用 "router.push()" 來(lái)實(shí)現(xiàn)導(dǎo)航

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

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

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

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

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

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

這個(gè)方法的參數(shù)是一個(gè)整數(shù)，意思是在 history 記錄中向前或者后退多少步，類(lèi)似 window.history.go(n)。

// 在瀏覽器記錄中前進(jìn)一步，等同于 history.forward()
router.go(1)

// 后退一步記錄，等同于 history.back()
router.go(-1)

// 前進(jìn) 3 步記錄
router.go(3)

// 如果 history 記錄不夠用，那就默默地失敗唄
router.go(-100)
router.go(100)

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

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

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

Home

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

重定向的意思就是當(dāng)你訪問(wèn) a 的時(shí)候，url 會(huì)被替換為 b ，于是匹配路由 b

重定向也是通過(guò) routes 配置來(lái)完成，下面例子是從 /a 重定向到 /b：

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

意思就是當(dāng)我們?cè)L問(wèn) b 的時(shí)候，路由匹配為 a ，但是url地址不變

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

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

你可以使用 router.beforeEach 注冊(cè)一個(gè)全局的 before 鉤子：

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

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

to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

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

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

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

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

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

做一個(gè)小例子：

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

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

鉤子函數(shù)代碼

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

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

    

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

定義路由的時(shí)候可以配置 meta 字段：

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

那么如何訪問(wèn)這個(gè) meta 字段呢？

首先，我們稱(chēng)呼 routes 配置中的每個(gè)路由對(duì)象為 路由記錄。路由記錄可以是嵌套的，因此，當(dāng)一個(gè)路由匹配成功后，他可能匹配多個(gè)路由記錄。

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

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

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

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