Three ways to jump to vue page

1, a label jump

Personal understanding: This belongs to jumping to external links, which are rarely used in projects

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

2. router-link jump

The internal routing jump of the project

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

3. Click event to jump

The first case is to jump to the specified route

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

The second case is to jump to the previous page (if there is no previous page, return to the home page)

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. Off-topic: The vant component library used in the recent app project has a van-cell unit component in it. The requirement is to have a jump event in it, as shown in the figure.

Code example:

The principle is the same as router-link,
there is another situation where to goes to the route that you want to jump to. It is often encountered when working on a project. It is a certain attribute in the table plus a jump routing event. At this time we Use slots to implement under the element where it is located, as shown in the figure:
#name is the element I want to process, and it is implemented with router-link