vue-router 笔记

1、  动态路由匹配

比如：（动态路由的高级匹配）

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

2、  编程式导航

（1）router.push(…)

使用router.push(…)【等同于<router-link to=”…”>(声明式)】创建，这个方法回向history栈中添加一个新的记录，当用户点击浏览器后退的时候，则返回之前的url

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

比如：

// 字符串

router.push(‘home‘)

// 对象

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

// 命名的路由

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 记录不够用，那就默默地失败呗

        router.go(-100)

        router.go(100)

3、  命名路由

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

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

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

4、  命名视图：

{

             path: ‘/nameview/child‘,

             components: {

               default: nameviewone,

               a: nameviewtwo,

               b: nameviewthree

             }

           }

5、  重定向

将一个页面重定向到另一个页面上

比如：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 重定向的 字符串路径/路径对象

        
            

            

            

            

            

            

            

            

            
}}
    

          ]
    

        })
    

6、  别名

是可以将一个页面的path名字，改成当前的。

比如：

           这里将路径为”/foo”的component改为alias的，原本的就被替换掉了

         {

      path: ‘/alias‘,

      component: "alias",

      alias: "/foo"

},

 更多笔记，待更新~

原文：http://www.cnblogs.com/qzccl/p/6007842.html