Vue-Router

[huandie2012]

每个路由对应一个组件。 在项目中，首先要在router文件夹下的index.js中创建一个router实例，然后在vue项目中注入路由，这样我门可以在组件中通过this.$router来访问当前路由。 $router.params、$router.query（如果 URL 中有查询参数）、$router.hash； 上面图片中展示的这种方式是动态路由匹配。 有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。 要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

<div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>

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

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。 children 配置就是像 routes 配置一样的路由配置数组，所以可以嵌套多层路由。 有时候想同时（同级）展示多个视图，这里就涉及到命名视图，如果 router-view 没有设置名字，那么默认为 default，确保正确使用 components 配置（带上 s）：

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="header"></router-view>

routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]

可以使用 创建 a 标签来定义导航链接，点击 等同于调用 router.push(...)。 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 router.push()，router.replace()，router.go() 单页面应用的核心之一是：更新视图而不重新请求页面