路由传参的全部方法

冒号的的形式传递传参（在params第二种中）、params、query三种都会在链接上显示出来，刷新页面不会丢失。参数放在本地储存中链接中不会显示参数 刷新页面也不会丢失

params

注：

• 使用params传参只能使用name进行引入
• 不写:age/:name’, 链接上不会显示参数但是刷新页面会丢失数据

1.第一种 图：

// 点击按钮传送数据
    goLogin() {
      this.$router.push({
        name:'Login',
         params:{
          name:'Tom',
          age:'18'
     }
      });
    },


// 接收参数
 name:this.$route.params.name,
 age:this.$route.params.age

2. 第二种 图：

• 在index.js指定login接收参数 path: '/login/:age/:name',

• 在home页中发送参数 <router-link to="/login/10/LiLi" tag="button"> 跳转到login</router-link>

• 在login页面接收参数 this.$route.params

query

注：

• path和name都可以用来传参,也会显示在链接上
• 不需要像params写:age/:name

1.第一种图：

传参：<router-link :to="{path:'/login',query:{age:22,name:'query'}}" tag="button">跳转login</router-link>
接收： this.$route.query

2.第二种图：

// 点击按钮传送数据
  goLogin() {
      this.$router.push({
        name: "Login",
        //也可以path
        // path:'/login',
        query: {
          age: "19",
          name: "query",
        },
      });
    },


// 接收参数
	name:this.$route.query.name,
	age:this.$route.query.age

如果想参数不在路径中显示也不会丢失数据 那就可以用本地储存了

// 点击按钮后 创建obj对象 然后 以字符串形式保存到本地储存种
 var obj = {
        name:'Tom',
        age:'999'
      }
 localStorage.setItem('Login',JSON.stringify(obj))

//  以对象接收本地储存
 console.log(JSON.parse(localStorage.getItem('Login')))
 this.name = JSON.parse(localStorage.getItem('Login')).name
 this.age = JSON.parse(localStorage.getItem('Login')).age

wacth 也可以监听路 获取值

 watch: {
    //路由可以用wacth监听
    $route: {
      handler() {
        const {classify } = this.$route.query // 获取到路径传参的数据
        console.log(classify)
        this.classify = classify
      },
      immediate:true // 立即执行操作
    },
  },