vue跳转路由router-link、push、replace

1. router-link 方法

在这里插入图片描述

	  <router-link to="/about" tag="button">跳转about页面</router-link>
      <router-link :to="{name:'Music'}" tag="button">跳转music页面</router-link>
      <router-link :to="{path:'login'}" tag="button">跳转login页面</router-link>
      
      //  name 和 path 要和右方js文件中填写的name path一致

2. 点击某个元素的时候跳转 path和replace

在这里插入图片描述

<div class="home">
      home页面
      <button @click="gologin"> 跳转到login页面</button>
      <button @click="gomusic"> 跳转到music页面</button>
      <button @click="goabout"> 跳转到about页面</button>
      <button @click="goabout"> 跳转到about页面</button>
  </div>
  
methods: {
    
    
      //点击跳转至上次浏览页面
       // this.$router.go(-1)
    gologin() {
    
    
          //指定跳转地址
          this.$router.replace('/login')
    },
     gomusic() {
    
    
          //指定跳转地址
         this.$router.push({
    
    path:'music'}); 
    },
     goabout() {
    
    
          //指定跳转地址
         this.$router.push({
    
    name:'About'}); 
    }
  }

猜你喜欢

转载自blog.csdn.net/weixin_54645059/article/details/113838440