Três maneiras de pular para a página vue

1, um salto de rótulo

Entendimento pessoal: trata-se de pular para links externos, que raramente são usados ​​em projetos

<a href="http://www.baidu.com/"><input type="button" value='百度'></a>

2. salto do link do roteador

O salto de roteamento interno do projeto

<router-link to="/water-sewage-treatment" class="router-test">
                    查看全部水厂
</router-link>

3. Clique no evento para pular

O primeiro caso é pular para a rota especificada

 html :
      <button @click="hreftwo" class="test-one">点我到第二个页面</button>
 js :
   methods:{
    
     //跳转页面
                    hreftwo(){
    
    
                              this.$router.push({
    
     path:'/two.html'  })
                              }
           }

O segundo caso é pular para a página anterior (se não houver página anterior, volte para a página inicial)

html：
      <div @click="goback()">返回</div>
     // 只返回上一页
           goback(){
    
    
                this.$router.go(-1);
            },
     //如果没有上一页返回首页
    methods: {
    
    
        back(){
    
    
            if (window.history.length <= 1) {
    
    
                this.$router.push({
    
    path:'/'})
                return false
            } else {
    
    
                this.$router.go(-1)
            }
        }
    },

3. Fora do tópico: A biblioteca de componentes vant usada no projeto de aplicativo recente contém um componente de unidade van-cell. O requisito é ter um evento jump, conforme mostrado na figura.

Exemplo de código:

O princípio é o mesmo que o link do roteador,
há outra situação em que vai para a rota para a qual você deseja pular. É frequentemente encontrado ao trabalhar em um projeto. É um determinado atributo na tabela mais um evento de roteamento de salto. Neste momento usamos slots para implementar sob o elemento onde ele está localizado, conforme mostrado na figura:
#name é o elemento que desejo processar, que é implementado com roteador-link