vue-router基础知识点二

一、嵌套路由

vue-router中含有一种嵌套关系的路由。
我的理解就是一个父亲包裹这孩子的过程，就是在路由设置后面再添加一个children项，如下所示

{
  path:"/nestrouter",
  component:nestrouter,
  children:[
    {
      path:'nestchild',
      component:nestchild
    }
  ]
}

注意：
一、子路由中path 不需要再加 / ，斜线表示从根路由出发
二、component中如果牵扯到多个module，则需要用components,如下所示

{path:"/View",component:View,children: 
            [   {path: 'view1',components:{
                    // default: a,
                    A:b,
                    B:c
                }},
                {path: 'view2',components:{
                    default: c,
                    A:a,
                    B:b
                }},
            ] 
        },

二、编程式导航

有两种方式进行导航

to后面的值需要用下划线来定义

router.push() 可以直接在push中写特定的路由 “/router”
也可以带参数参数写 如下所示

// 因为提供了path  所以params被忽略了  route.params内没有值是空的  
this.$router.push({path: 'program', params: { userId: '123' }});
// 带查询参数，变成 /program?plan=123  route.query中有传送过来的值
this.$router.push({path:"/program",query:{plan:"123"}});

历史记录查询 router.go() 可以帮助我们在浏览记录中前进几步 后退几步 如果超出查询范围则失败

详细内容可以了解vue官网
https://router.vuejs.org/zh/guide/essentials/navigation.html