vue-router

动态建立路由

使用vue-router

import VueRouter from 'vue-router'

Vue.use(VueRouter)

动态路由接收数据

$route.params

路由配置js：

{
  path: '/org/:id',
  
  component: function(resolve){

    require(['../views/org.vue'],resolve);

  }
}

页面html：

<div class="box"> {{$route.params.id}}</div>

$route.query

路由配置js：

{
  path: '/org',
  
  component: function(resolve){

    require(['../views/org.vue'],resolve);

  }
}

页面html：
发送页：<router-link :to="{path:'/org',query:{num : 1}}">vue</router-link>

接收页：<div class="box"> {{$route.query.num}}</div>

嵌套路由

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

编程式的导航

router.push(location)

// 字符串
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.forward()
router.go(1)

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

// 前进 3 步记录
router.go(3)

// 若是 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

操做 History

你也许注意到 router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。

所以，若是你已经熟悉 Browser History APIs，那么在 vue-router 中操做 history 就是超级简单的。

还有值得说起的，vue-router 的导航方法 （push、 replace、 go） 在各种路由模式（history、 hash 和 abstract）下表现一致。

命名路由

有时候，经过一个名称来标识一个路由显得更方便一些，特别是在连接一个路由，或者是执行一些跳转的时候。你能够在建立 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})
要连接到一个命名路由，能够给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事：

router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。