vue2路由跳转

声明式< router-link>标签

• 无参跳转

  • 字符串:

  <router-link to="/home">Home</router-link>
  

  • 动态绑定:

  <router-link :to="'home'">Home</router-link>
  

  上面home调用下面home
  

  export default {
    name: 'App',
    data(){
      return {
        home:'/home',
      }
    }
  }
  

2.携带参数

• query

  传

  <router-link :to="{path:'/home',query:{id}}">
  home
  </router-link>
  

  接
  html取参

  $route.query.id
  

  js取参

  this.$route.query.id
  

• params
  传

  <router-link :to="{name:'home',params:{id}}">
  home
  </router-link>
  

  name是路由别名
  接
  html取参

  $route.params.id
  

  js取参

  this.$route.params.id
  

  ---

编程式js方法

this.$router.push({ path: '/home' })

this.$router.push({path: '/home', query: {id:this.id}});

this.$router.push({ name: 'home', params: { id: this.id}})

接参方式同上

---

tip

this.$router.push

跳转到指定url路径，并向history栈中添加一个记录，点击后退会返回到上一个页面。

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面，就是直接替换了当前页面。