路由跳转及传值取值

---

前言

一个页面跳转到另一个页面功能，使用路由跳转来实现

---

一、语法介绍

方法一：< router-link :to=… >
方法二：router.push(…)
router.push(…)参数可以是字符串路径，也可以是对象
< router-link :to="…" > 等同于调用 router.push(…)

二、使用方法

2.1 < router-link :to=… >

代码如下（示例）：

	<router-link class="tab-bar-item" to="/mobileview/home">
      <div class="icon">
        <i class="el-icon-s-home"></i>
      </div>
      <div>首页</div>
	</router-link>

{
        path: 'home',
        component: () => import('../views/mobile/MobileHomeView.vue'),
        meta: {
          title: '首页'
        }
      },

效果图

页面效果

url地址

2.2 router.push(…)

不带参

代码如下（示例）：

	 <div class="iconP" @click="goto()">
        <p>
          <van-icon name="paid" />
          我的钱包
          <i class="iconRight">
            <van-icon name="arrow" />
          </i>
        </p>
     </div>
     ——————————————————————
      goto() {
      this.$router.push('mypurse');
    },

 {
    path: '/mypurse',
    name: 'mypurse',
    component: MyPurseView,
  },

效果图

页面效果

url地址

带参

----params

	<div class="iconP" @click="goto('/mypurse','mypurse','我的钱包')">
        <p>
          <van-icon name="paid" />
          我的钱包
          <i class="iconRight">
            <van-icon name="arrow" />
          </i>
        </p>
     </div>
     ————————————————————————————
     goto(path, name,val) {
      this.$router.push({
        path: path,
        name: name,
        params:{
          val:val,
        }
      });
    },

取值

created() {
    let val = this.$route.params.val;
    console.log(val);
  },

效果图

页面效果

url地址

控制台

----query

	<div class="iconP" @click="goto('/mypurse','mypurse','我的钱包')">
        <p>
          <van-icon name="paid" />
          我的钱包
          <i class="iconRight">
            <van-icon name="arrow" />
          </i>
        </p>
     </div>
     ————————————————————————————
     goto(path, name,val) {
      this.$router.push({
        path: path,
        name: name,
        query:{
          val:val,
        }
      });
    },

取值

created() {
    let val = this.$route.query.val;
    console.log(val);
  },

效果图

页面效果
url地址
控制台

区别

两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用