Vue notes: Passing parameters between routes (hand touch tutorial)

Don't over BB with you, just start knocking

First create two pages (in fact, the project created by default by the vue create command has been changed)

Insert picture description here

Take a look at the page effect

Insert picture description here

Add some products to the store page

<ul>
  <li v-for="item in list" :key="item.id">
    {
   
   { item.name }}
  </li>
</ul>

<script>
export default {
    
    
  name: "Home",
  data() {
    
    
    return {
    
    
      list: [
        {
    
     id: 1, name: "第一个商品" },
        {
    
     id: 2, name: "第二个商品" },
        {
    
     id: 3, name: "第三个商品" },
        {
    
     id: 4, name: "第四个商品" },
        {
    
     id: 5, name: "第五个商品" },
      ],
    };
  },
};
</script>

Take a look at the page effect
Insert picture description here

query parameter

Before we passedurl pass value, Are all adding one at the end of the address bar? Keep up with the parameters that need to be passed,
So is it possible in Vue? Let's try

<router-link to="/about?id=1">{
   
   { item.name }}</router-link>

query receiving parameters

Create a life cycle function, we print this.$route to see

<script>
export default {
     
     
  created() {
     
     
    console.log(this.$route)
  }
}
</script>

usequery pass valueWhen, all the parameters are inthis.$route.queryinside

Insert picture description here

Display the parameters directly on the page

<template>
  <div class="about">
    <h1>这里是购物车</h1>
    <p>{
   
   { this.$router.query.id }}</p>
  </div>
</template>

Look at the effect

Insert picture description here

Great, you can get the parameters in this way, so we change some of the wording to pass different parameters every time you click

<router-link :to="`/about?id=${item.id}`">{
   
   { item.name }}</router-link>

Look at the effect
Insert picture description here

Pass parameters for dynamic routing

First create a new info page so that we can observe
Insert picture description here
the configuration of the relevant routing information in the index file under the router page

When passing parameters in dynamic routing, where are several parameters set in the routing configuration, you need to pass several parameters when passing them

const info = () => import('../views/info/index')
  {
    
    
    path:'/info/:id/:name',
    name:'info',
    component:info
  }

Change router-link on the store page

<h1>这里是商店</h1>
<ul>
  <li v-for="item in list" :key="item.id">
    <!-- <router-link :to="`/about?id=${item.id}`">{
    
    { item.name }}</router-link> -->
    <router-link :to="`/info/${item.id}/${item.name}`">
    {
   
   { item.name }}
    </router-link>
  </li>
</ul>

Dynamic routing receiving parameters (params)

Remember the picture of this.$route printed above? The parameters of dynamic routing are inparamsin

The parameters passed by dynamic routing need to be received like this
this.$route.params. parameters

<template>
  <div>
    <h1>这里是商品详情页面</h1>
    <p> {
   
   { this.$route.params.id }} </p>
    <p> {
   
   { this.$route.params.name }} </p>
  </div>
</template>

<script>
export default {
     
     
  
}
</script>

Take a look at the page effect

Insert picture description here

The difference between route and rouer

$router

All current routing objects can be understood as routes
This is where we configure all routing

$route

The current route object is used to obtain the attributes or methods in the current route
Which of the current pages is active, then who is $route

Jump between pages

Switching of routing is essentially the display and hiding of components
Jump by string

<router-link :to="`/ 页面名称?参数名=${参数值}`"></ router-link>

Object way to jump

<router-link :to="{path: '/页面名称' }">< / router-link>

js way to jump

We use $routerpushMethod to jump

<h1>这里是商店</h1>
<ul>
 <li v-for="item in list" :key="item.id">
   <!-- <router-link :to="`/about?id=${item.id}`">{
    
    { item.name }}</router-link>
   <router-link :to="`/info/${item.id}/${item.name}`">动态路由
   {
    
    { item.name }}
   </router-link> -->
   <button @clikc='jump(item)'>跳转页面,传参：{
   
   {item.id}}：{
   
   {item.name}}</button>
 </li>
</ul>

When we use js to jump and need to pass parameters at the same time, we must use named routing, which is this
Generally, when we use named routes, the values of name and path are the same
Click the button to execute the jump method to jump
The format of passing parameters is
this.$router.push({name:'router name', query:{parameters}})
When neededDynamic routing parameters(params), putqueryReplace withparamsCan

  methods:{
    
    
    jump(item) {
    
    
      console.log(item)
      this.$router.push({
    
    name:'About',query:{
    
    id:item.id,name:item.name}})
    }
  }

Look at the effect
very successful
Insert picture description here