vue前端路由

前端路由：
vue-router用来构建SPA
相当于a标签，用来配置路由地址
或者用this.$router.push({path:})编程式路由
路由渲染的位置
动态路由
vue模板只能有一个根元素，添加其他标签时需要包裹在同一个

下面

/user/:username
/user/:username/post/:post_id

 path: '/goods/:goodsId',
 http://localhost:8080/#/goods/kkii
 path: '/goods/:goodsId/user/:name',
 http://localhost:8080/#/goods/kkii/user/admin

路由模式mode:hash/history

嵌套路由
路由里面嵌套路由
子组件的路由地址要写正确

index.js
  routes: [
    {
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList,
      children:[
        {
          path:'title',
          name:'title',
          component: Title
        },
        {
          path:'img',
          name:'img',
          component: Image
        },
      ]
    }
  ]
  
GoodsList.vue
    <router-link to="/goods/title">显示商品标题</router-link>
    <router-link to="/goods/img">显示商品图片</router-link>

编程式路由
利用js实现页面的跳转

  methods:{
    jump(){
      this.$router.push("/cart");
      // this.$router.push({path:'/cart'});
      // this.$router.push({path:'/cart?goodsId=123'});
    }

命名路由和命名视图
给路由定义不同的名字，根据名字进行匹配
给不同的router-view定义名字，通过名字进行对应组件的渲染

----------------GoodList.vue-------------------------
<!--params是路由的参数，不是路由之间跳转的参数-->
<router-link v-bind:to="{name:'cart',params:{cartId:123}}">
跳转到购物车页面</router-link>
-----------------index.js--------------------------
    {
      path:'/cart/:cartId',
      name:'cart',
      component:Cart
    }
http://localhost:8080/#/cart/123

命名视图：是给router-view加不同的name值
app.vue里面通过对router-view 的name属性赋值来对页面进行切分

<router-view class="main"></router-view>
<router-view class="left" name="title"></router-view>
<router-view class="right"name="img"></router-view>