Vue-(10)页面跳转-传值

前言

Vue页面跳转，一般用vue-router来做。 在我们创建Vue项目框架时，在配置文件package.json里面一般都有默认添加的依赖库。

  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.5.2",
    "vuex": "^3.6.2"
  },

我们只要创建好Vue项目，其他的不用管了，直接用vue-router来实现页面跳转-传值。

Vue页面跳转-传值

在页面HelloWord.vue点击按钮，跳转到页面textVue.vue，并且传值

一，创建两页面，跳转-传值
1，这里我们用 Vue框架自带的页面HelloWord.vue，然后自己创建一个页面textVue.vue,并且放在一个文件下componebts，当然文件位置可以改变，为了图简单。

image.png

2，HelloWord.vue页面，添加点击跳转-传值事件
两种方法@click方法和router-link方法。

image.png

在HelloWord.vue页面，@click方法

 <div class='sb'>
 <button @click='goTo()'>方法1：点击跳转1</button>
 </div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
   methods:{

 goTo(){
     //带参数跳转
     this.$router.push({ name:'textVue' ,params: {name:'波鲁萨利诺', age: 42 } });
     console.log("带参数跳转");

 }
 }
 }
</script>

在HelloWord.vue页面，router-link方法`

 <div class='sb'>
 <router-link :to="{name:'textVue',params: {name:'多弗朗*明哥', age: 18 }}">
 <button>方法：点击跳转2</button> </router-link>
 
 </div>

3，textVue页面，添加接受事件和展示传递的值

image.png

获取传递的值

<script>
 export default {
  name: "测试测试惺惺惜惺惺",
  date:function(){
//    return {"name":name}
  },
  created(){
   this.getParams()
  },
  methods:{
   getParams() {
    // 取到路由带过来的参数
    this.name = this.$route.params.name;
    this.age = this.$route.params.age;
    // 打印 传递的数据 
    console.log(this.$route.params);
   }
  }
 }
</script>

展示传递的值

  <div>   
  <p> 跳转页面传值 </p> 
  <!-- 展示传递的数据 -->
  <p> {{name}}  {{age}}岁 </p> 
  </div>

二，在router文件夹的index文件下，配置好页面路径

image.png

最终效果图如下：

QQ20210824-112021-HD.gif

注释：1，当新建Vue文件，不在文件下，在其他文件夹的时候，那么在router文件夹的index文件如下。

image.png

注释：2，全局视图

image.png