vue-router

一、基础

一、动态路由匹配

• $route.params 动态路由参数

• $route.query

• $route.hash
  

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: 123 }

二、嵌套路由

• children

以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径(可使用空路由)

const router = new VueRouter({
  routes: [复制代码

    { path: '/user/:id', component: User,
      children: [复制代码

        {复制代码

 // 当 /user/:id 匹配成功，// UserHome 会被渲染在 User 的 <router-view> 中
            { path: '', component: UserHome }, 复制代码

        },复制代码

        {
          // 当 /user/:id/profile 匹配成功，// UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功// UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})复制代码

三、路由导航方式

• router.push －－ window.history.pushState、

• router.replace －－ 、 window.history.replaceState

• router.go －－ window.history.go

四、具名路径

• 定义路由时，可以加上相应的名字，方便进行路径的跳转（v-link, router.go都可以用到）
  

  router.map({
    '/user/:userId': {
      name:'user', // 给这条路径加上一个名字
      component: { ... }
    }
  })复制代码

  <av-link="{ name: 'user', params: { userId: 123 }}">User</a>复制代码

  router.go({ name:'user', params: { userId:123 }})复制代码

v-ref子组件定义的索引，父组件可根据该值快速找到子组件，v-ref不支持驼峰命名规则。

转载于:https://juejin.im/post/5aea83886fb9a07ac0221375