vue-router 筆記

一、  動態路由匹配

好比：（動態路由的高級匹配）

https://github.com/vuejs/vue-router/blob/next/examples/route-matching/app.js

二、  編程式導航

（1）router.push(…)

使用router.push(…)【等同於<router-link to=」…」>(聲明式)】建立，這個方法迴向history棧中添加一個新的記錄，當用戶點擊瀏覽器後退的時候，則返回以前的url

該方法的參數能夠是一個字符串路徑，或者一個描述地址的對象。

好比：

// 字符串

router.push('home')

 

// 對象

router.push({ path: 'home' })

 

// 命名的路由,(若是name對應的路徑是/user的話，那麼至關於/user/123)

router.push({ name: 'user', params: { userId: 123 }})

 

// 帶查詢參數，變成 /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})

 

（2）router.replace(location)

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

（3）router.go(n)

這個方法的參數是一個整數，意思是在 history 記錄中向前或者後退多少步，相似 window.history.go(n)

好比：

// 在瀏覽器記錄中前進一步，等同於 history.forward()

router.go(1)

// 後退一步記錄，等同於 history.back()

router.go(-1)

// 前進 3 步記錄

router.go(3)

// 若是 history 記錄不夠用，那就默默地失敗唄

100router.go(-)

100router.go()

三、  命名路由

命名路由使用的是：（注意：前面要記得加上一個：）

  <li><router-link :to="{ name: 'nameRoute'}">命名路由</router-link></li>

      

<li><router-link :to="{ name: 'namerouterone', params: { id: 123 }}">命名路由代參</router-link></li>

 

四、  命名視圖：

{

             path: '/nameview/child',

             components: {

               default: nameviewone,

               a: nameviewtwo,

               b: nameviewthree

             }

}

五、  重定向

將一個頁面重定向到另外一個頁面上

好比：https://github.com/vuejs/vue-router/blob/next/examples/redirect/app.js

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

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

重定向的目標也能夠是一個命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
    routes: [{
        path: '/a',
        redirect: to => {
            // 方法接收 目標路由 做爲參數
            　　　　
            // return 重定向的 字符串路徑/路徑對象
            const {
                hash,
                params,
                query
            } = to
            if(query.to === 'foo') {　　
                return {
                    path: '/foo',
                    query: null
                }　　
            }
            if(hash === '#baz') {　　
                return {
                    name: 'baz',
                    hash: ''
                }
            }
            if(params.id) {　　
                return '/with-params/:id'
            } else {　　
                return '/bar'
            }
        }
    }]
})

 

六、  別名

是能夠將一個頁面的path名字，改爲當前的。

好比：

           這裏將路徑爲」/foo」的component改成alias的，本來的就被替換掉了

 {

      path: '/alias',

      component: "alias",

      alias: "/foo"

},

 更多筆記，待更新~