Routing parameters for Vue.js

This time I will bring you the routing parameters of Vue.js. What are the precautions when using the routing parameters of Vue.js? The following is a practical case. Let’s take a look. .

Function: Pass routing parameters for the page.

Configure the parameters that need to be passed in the routing mapping table:
For example: apple page, I need to pass a color parameter, You can set parameters in the path starting with:.

path: '/apple/:color',

Specific use:

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple/:color',      component: Apple
    },
    {      path: '/banana',      component: Banana
    }
  ]
})

When I jump on the page, I splice the parameters directly after the address. The red below is what is passed The color parameter

http://localhost:8080/apple/red

gets the parameters passed by the page in the script tag, and gets

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="getParams">get params</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am componnet apple&#39;
      }
    },    methods: {
      getParams () {        console.log(this.$route.params)
      }
    }
  }</script>

of this.$route.params. The above print result is:

{color: "red"}

To use the parameters passed by the interface in the template tag, you can use $route.params.color

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <p>{{$route.params.color}}</p>
    <button @click="getParams">get params</button>
  </div></template>

Pass multiple parameters

The routing settings are as follows:

path: '/apple/:color/detail/:type',

The url of the passed parameters:

http://localhost:8080/apple/red/detail/3

Print all parameters passed:

{color: "red", type: "3"}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese website Other related articles!

Recommended reading:

Vue tag attributes and conditional rendering of Vue.js

List rendering v of Vue.js -for array object subcomponent

The above is the detailed content of Routing parameters for Vue.js. For more information, please follow other related articles on the PHP Chinese website!