vue-Router的实现原理

基本任务 Vue Router 基础回顾Hash模式History模式模拟实现自己的Vue Router Vue Router基础回顾

给Vue实例注入 r o u t e 和 route和 route和router,route路由规则，router路由对象，

router对象下的属性

mode:hash 路由模式哈希模式，已‘#’表示路由模式

currentRoute：当前路由规则，有时（在插件中）不方便获取到路由规则，可以先获取路由对象然后获取到当前路由规则

动态路由

路由传参

路径后传参path '/detail/:id'获取id{{$route.params.id}}

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    // 开启 props，会把 URL 中的参数传递给组件
    // 在组件中通过 props 来接收 URL 参数
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue')
  }
]

设置props后在组件中接收参数