主要内容

1.动态路由匹配

2.嵌套路由

3.命名路由

4.命名视图

5.重定向

6.别名

7.编程式导航

在router 中显示为```const HospitalAdmin = () =>  import( /* webpackChunkName: "HospitalAdmin" */ '@/views/HospitalAdmin'){    path:'/about',    component: HospitalAdmin,}```这样写的原因是起到懒加载的作用。当使用这个模块的时候，才会加载```// which is lazy-loaded when the route is visited // this generates a separate chunk (HospitalAdmin.[hash].js） for this route//import()的作用,起到懒加载的作用。// /* webpackChunkName: "HospitalAdmin" */:在打包的时候起到标注的作用，打包的时候以（HospitalAdmin.[hash].js）的形式去打包```### 动态路由匹配```const Detail =() =>  import( /* webpackChunkName: "Detail" */ '@/views/Detail'){    path:'/detail/:id',    compotent:Detail}```### 嵌套路由```const Parent=() =>  import( /* webpackChunkName: "Parent" */ '@/views/Parent')    const Children=() =>  import( /* webpackChunkName: "Children" */ '@/views/Children'){    path:'/parent',    component:Parent,    children:[{        path:'children',        component:Children    }]}```### 命名路由```{    path:'/parent',    component:Parent,    name:'parent',    children:[{        path:'children',        name:'children',        component:Children    }]}
    
     parent
    ```### 命名视图```
    
    
    router.js{    path:'/box',    components:{        default:()=>import ('@/views/demo1.vue'),        item2:()=>import('@/views/demo2.vue'),        item3:()=>import('@/views/demo3.vue')    },    name:'box',}```### 重定向```{    path:'/main',    redirect:to=>{        return {            name:'home'        }    }}{    path:'/main',    redirect:to=>{        return '/'    }}{    path:'/main',    redirect:to=>'/'   }```### 别名```const Home=() =>  import( /* webpackChunkName: "Home" */ '@/views/Home'){    path:'/',    alias:'home_page',    component:Home}```### 编程式导航通过js 来控制跳转```demo.vuemethods:{    handleFun(){    //回退方法        this.$router.go(-1)        this.$router.back()            // 跳转指定页面         this.$router.push({        name:'home',        query:{            name:'张三',            age:'12'        }    })    }    //or    this.$router.push('/home')        this.$router.replace({        name:'parent'    })}```push 方法，在浏览器的历史记录中有记录，但是replace 方法，在浏览历史中，没有记录。#### 编程式导航加参数 3种写法```   this.$router.push({        name:'home',        query:{            name:'张三',            age:'12'        }    })    }    //    this.$router.push({        name:'home',        params:{            name:'张三',            age:'12'        }    })    }    //    let name='张三'    this.$router.push({        path:`/home/${name}`    })                :8080/home?name='张三'&age='12'    :8080/home/张三/12    :8080/home/张三```复制代码