vue使用router路由进行跳转、传值（query、params）以及query与params传值方式的区别

在vue日常使用中，虽然使用a标签进行跳转并不会报错，但是处于vue规范，还是推荐使用vue中自带的标签进行跳转，

一、使用router-link标签跳转

在主页面vue文件中添加router-link标签

router-link标签中自带“to”属性

<router-link to="/register">register</router-link>

在to属性赋值为path路径,而path路径则在router目录下的index.js中设置

打开该文件后在const routes = [ ]中添加跳转路径

const routes = [
  {
    path: "/register",
    name: "register",
    component: () =>
      import("../views/RegisterView.vue"),
  }
];

其中：

path为自定义跳转path路径

name为自定义跳转name路径

component: () =>

      import(" 此处添加需要跳转页面文件的相对路径 ")

二、使用router-link标签传值

1.query方式传值

第一步：

在需要传值页面文件中的<template>标签中添加节点并绑定事件

<template>
  <div class="home">
    <div @click=ToLogin>点此去登录</div>
  </div>
</template>

第二步：

在需要传值的页面文件中的<script>标签暴露中添加方法

<script>
export default {
  methods:{
    ToLogin(){
      this.$router.push({
        path:"/login",
        query:{
          answer:"登录了"
        }
      })
    }
  }
};
</script>

其中：

path为自定义path路径，

query中为传递的值

第三步：

在需要值的页面文件中的<script>标签暴露中接收值

<script>
export default {
    data() {
        return {
            newanswer:"没登录呢"
        }
    },
    created(){
        this.newanswer = this.$route.query.answer
    }
}
</script>

2.params方式传值

第一步：

在需要传值页面文件中的<template>标签中添加节点并绑定事件

<template>
  <div class="home">
    <div @click=ToRegister>点此去注册</div>
  </div>
</template>

第二步：

在需要传值的页面文件中的<script>标签暴露中添加方法

<script>
export default {
  methods:{
    ToRegister(){
      this.$router.push({
        name:"register",
        params:{
          answer:"注册了"
        }
        
      })
    }
  }
};
</script>

其中：

name为自定义name路径，

query中为传递的值

第三步：

在需要值的页面文件中的<script>标签暴露中接收值

<script>
export default {
    data() {
        return {
          newanswer:"没注册呢"  
        }
    },
    created(){
        this.newanswer = this.$route.params.answer
    }
    
}
</script>

三、query与params传值方式的区别

1.query可以搭配path路径/name路径进行传值，而params则只能搭配name路径进行传值

2.query传值后传递的值会拼接到域名url之后

而params传值则不会拼接

3.query传参，刷新页面时不会丢失数据，而params传参时则会丢失