路由的基本使用可参考 Vue路由使用总结

1.router与route的区别

1.router是VueRouter的一个对象，一个全局对象，通过router实现页面跳转，向后回退，向前等操作。
router.push
router.replace
router.go
router.back
router.forward
router:官方文档

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
我们可以从vue devtools中看到每个路由对象的不同

image.png image.png

2.路由跳转传参

query形式的网址 /home?id=1
params形式的网址/home/1

全部代码

点击跳转，跳转前的页面ShopcarContainer
两种形式的router-link一个各5个
<router-link :to="'/shopDetail/'+v">routerLink-params:{{v}}</router-link>
<router-link :to="'/shopDetail?id='+v">routerLink-query:{{v}}</router-link>
两种形式的调用router.push方法的按钮各5个

paramsClick:function (i) {
        console.log("param"+i);
        this.$router.push({
          name:"shopDetail",
          params:{id:i}
        });
      }

queryClick:function (i) {
        console.log("query"+i);
        this.$router.push({
          name:"shopDetail",
          query:{id:i}
        });
      }

image.png

<template>
  <div>
    <h1>ShopcarContainer</h1>
    <ul>
      <li v-for="(v,i) in list">
        <router-link  :to="'/shopDetail/'+v">
          routerLink-params:{{v}}
        </router-link>
      </li>
      <li v-for="(v,i) in list">
        <router-link  :to="'/shopDetail?id='+v">
          routerLink-query:{{v}}
        </router-link>
      </li>
    </ul>
    <ul>
      <li v-for="(v,i) in list"><button @click="paramsClick(v)">paramsClick:{{v}}</button></li>
    </ul>
    <ul>
      <li v-for="(v,i) in list"><button @click="queryClick(v)">queryClick:{{v}}</button></li>
    </ul>
  </div>
</template>

<script>
  export default {
    data:function () {
      return{
        list:[0,1,2,3,4]
      }
    },
    methods:{
      paramsClick:function (i) {
        console.log("param"+i);
        this.$router.push({
          name:"shopDetail",
          params:{id:i}
        });
      },
      queryClick:function (i) {
        console.log("query"+i);
        this.$router.push({
          name:"shopDetail",
          query:{id:i}
        });
      }
    }
  }
</script>

<style scoped>

</style>

跳转后页面ShopDetail
显示param，query中的参数

image.png
image.png

<template>
    <div>
      <p>params:{{params}}</p>
      <p>query:{{query}}</p>
    </div>
</template>

<script>
  export default {
    name: 'ShopDetail',
    data:function () {
      return {
        params:"",
        query:""
      }
    },
    mounted:function () {
      this.params=this.$route.params;
      this.query=this.$route.query;
      console.log(this.$route);
    }
  }
</script>

<style scoped>

</style>

router.js路由配置

var router = new VueRouter({
  routes: [
    {path: '/home', name:"home",component: HomeContainer},
    {path: '/member', name:"member",component: MemberContainer},
    {path: '/shopcar',name:"shopcar", component: ShopcarContainer},
    {path: '/search', name:"search",component: SearchContainer},
    {path: '/shopDetail/:id', name:"shopDetail",component: ShopDetail},//param
    {path: '/shopDetail', name:"shopDetail",component: ShopDetail},//query
  ],
  linkActiveClass: 'mui-active'
})

注意
$router.push(),push中可以是直接的地址，也可以是对象

params形式：{name:"page2",params:0}

query形式：{name:"page2",query:0}
{path:"page1/page2",query:0}

params形式中：path不能和params一起使用，否则params将无效。需要用name来指定页面。
参考：vue2.0中的router 和 route的区别
vue-router 2.0 跳转之router.push()
vue路由传参的三种基本方式