All methods of routing parameters

Passing parameters in the form of colon (in the second type of params), params, and query will all be displayed on the link, and refreshing the page will not be lost. The parameters will not be displayed in the link in the local storage

params

Note:

• Use params to pass parameters can only be imported using name
• Don't write: age/:name', the parameters will not be displayed on the link but the data will be lost if the page is refreshed

1. The first picture:

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


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

2. The second picture:

• Specify login receiving parameters in index.js path: '/login/:age/:name',

• Send parameters in the home page <router-link to="/login/10/LiLi" tag="button"> 跳转到login</router-link>

• Receive parameters on the login page this.$route.params

query

Note:

• Both path and name can be used to pass parameters and will also be displayed on the link
• No need to write like params: age/:name

1. The first picture:

Passing parameters: <router-link :to="{path:'/login',query:{age:22,name:'query'}}" tag="button">跳转login</router-link>
receiving:this.$route.query

2. The second picture:

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


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

If you don’t want the parameters to be displayed in the path and the data will not be lost, then you can use local storage.

// 点击按钮后 创建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