VUE原理深度解析/Vue Router实现原理过程

{
    path:'/detail/:id',
    name:'Detail',
    // 非动态路由
    //compontent:'details',
    // 开启prop传参功能
    props:true,
    //实现懒加载 用户点击才进行加载
    compontent = ()=>{'../views/Details.vue'}
}

// 获取方式

• 第一种 $route.params.id
• 第二种通过props进行接收

export default{
    name:'Detail',
    props:['id']; 
}

嵌套路由

• 使用场景
  // layout.vue

Header
router view
footer

// index.vue 首页
// details.vue 详情页

• 文件结构

src
    components 文件夹
        layout.vue
    views 文件夹
        Details.vue
        Index.vue
        Login.vue

• 路由配置

const routes = [{
    name:'login',
    path:'/login',
    comp