vue-router 路由的基本介绍

1.前端路由的优缺点：

    优点：

    用户体验好，不需要每次都从服务器全部获取，快速展现给用户

    缺点：

    1）不利于SEO；
    2）使用浏览器的前进，后退键的时候会从新发送请求，没有合理的利用缓存；
    3）单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置；

2.vue-router 的几种基础形式

    A.动态路由匹配

{
    path:"/goods/:id",
    name:"GoodsList",
   component:"../page/goodslist"
}

// 获取路由参数
this.$route.params.id

    B.嵌套式路由

{
    path:"/goods",
    name:"GoodsList",
    component:"../page/goodslist",
     children:[
         {
              path:"title",
              name:"title",
              component:"../page/title",
          }
     ]
}

// 实现跳转
<router-link to="/goods/title"> 跳转到标题页面 </router-link>

    C.编程式路由

// 通过JS来实现页面的跳转
1) $router.push("name");
2) $router.push({path:"name"});
3) $router.push({path:"name?id=123"})
  或者
  $router.push({path:"name",query:{id:123}});
4) $router.go(1);

// 获取路由参数
this.$route.query.id

// 实现跳转
<button @click = "jump"></button>

jump(){
    this.$router.push({path:'title',query:{id:123}})
}

    D.命名路由和命名视图

// 命名路由
{
    path:"/goods/:id",
    name:"GoodsList",
   component:"../page/goodslist"
}

<router-link :to="{name:'cart',params:{id:123}}"> 跳转到标题页面 </router-link>

// 命名视图
{
   path:"/",
   name:"GoodsList",
   components:{
        default:"../page/goodslist",
         title:"../page/title",
        img:"../page/img"  
     }
}

<router-view></router-view>
<router-view name="title"></router-view>
<router-view name="img"></router-view>