What are the three ways to jump in Vue routing?

Jump method: 1. Use the "

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

router-view is where routing content is implemented. When introducing components, write the place where they need to be introduced.

It should be noted that router-view must be used as a container when using vue-router to control routing.

Three ways to jump through routing

1. router-link [The simplest method to achieve jump]

<router-link to=&#39;需要跳转到的页面的路径>

When the browser parses it, it parses it into a tag similar to .

#div和css样式略
    <li >
        <router-link to="keyframes">点击验证动画效果 </router-link>
    </li>

Don’t forget to introduce the path that needs to be jumped under router/index.js in advance.

[Related recommendation: "vue.js Tutorial"]

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

is often used to pass parameters in routes. The usage is the same as the third type

. The difference is:

1), query introduction method

params can only use name to introduce routes

And query must be introduced with path

2), query delivery method

is similar to get parameters in our ajax, in Displaying parameters

params in the browser address bar is similar to post. Parameters are not displayed in the browser address bar

in the helloworld.vue file

<template>
.....
<li @click="change">验证路由传参</li>
</template>
 
<script>
export default {
  data () {
    return {
      id:43,  //需要传递的参数
    }
  },
  methods:{
    change(){
      this.$router.push({  //核心语句
        path:&#39;/select&#39;,   //跳转的路径
        query:{           //路由传参时push和query搭配使用 ，作用时传递参数
          id:this.id ,
        }
      })
    }
  }
}
</script>

in select. In the vue file,

<template>
  <select>
          <option value="1" selected="selected">成都</option>
          <option value="2">北京</option>
  </select>
</template>
 
<script>
    export default{
        data(){
            return{
                id:&#39;&#39;,
            }
        },
        created(){  //生命周期里接收参数
            this.id = this.$route.query.id,  //接受参数关键代码
            console.log(this.id)
        }
    }
</script>

3 and this.$router.replace{path: '/'} are similar and will not be repeated.

For more programming-related knowledge, please visit : Programming Video! !

The above is the detailed content of What are the three ways to jump in Vue routing?. For more information, please follow other related articles on the PHP Chinese website!