一、push

this.$router.push()

跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

1、不在url中显示参数

this.$router.push({
        name: `${url}` + 'Template', // 路由中的name
        params: {
          url: `${url}`,
        },
      })
// url是data变量
// path不能与params同用，否则param会失效
// 相当于post请求

路由

{
    path: 'piano',
    name: 'pianoTemplate',
    component: Piano,
    meta: {
        requireAuth: true
    },
}

获取

<p>{{this.$route.params.url}}</p>

2、在url中显示参数

this.$router.push({
        path: '/piano',
        quary: {
          url: `${url}`,
        },
      })


// 或者
this.$router.push({
        path: `/course/${url}`,
      })

路由

{
    path: 'piano',
    name: 'pianoTemplate',
    component: Piano,
    meta: {
        requireAuth: true
    },
}

获取

<p>{{this.$route.query.url}}</p>

BUG记录

路由

routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
      redirect: '/home',
      children: [
        {
          path: 'category/:path',
          name: 'category',
          component: Category,
        },
        ...courseRouter
      ]
    },
]

跳转

push(path) {
      this.$router.push({
        path: `/category/${path}`,
      })

失败

 mounted() {
    this.path = this.$route.params.path
    console.log('path', this.path) // 只会显示一次
  },

正确

watch: {
    '$route'(to, from) {
    // 这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了
      this.path = this.$route.params.path
      console.log('路由路由', this.path)
    }
  },

二、router-link

在vue-router中，有两大对象被挂载到了实例this；
$route（只读、具备信息的对象）；
$router（具备功能的函数）

1、不在url中显示参数

<router-link tag="a" :to="{name: 'pianoTemplate', params: {url:xxx}}">
    {{xxxxx}}
</router-link>

路由

{
    path: 'piano',
    name: 'pianoTemplate',
    component: Piano,
    meta: {
        requireAuth: true
    },
}

获取

<p>{{this.$route.query.url}}</p>

此方式传值,参数不会显示在路径上,但是如果刷新页面传入的值会失效

// 利用watch监听对象

2、在url中显示参数

<router-link :to="{path: '/piano', query: {url: xxxx}">
      {{xxxxxxx}}
</router-link>

路由

{
    path: 'piano',
    name: 'pianoTemplate',
    component: Piano,
    meta: {
        requireAuth: true
    },
}

获取

<p>{{this.$route.query.url}}</p>

三、replace

this.$router.replace()

同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。

四、go

this.$router.go(n)

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面