How to use vue to participate in router

This time I will show you how to use the vue router to participate in the router, and what are the precautions for using the vue router to participate in the router. The following is a practical case, let's take a look.

vue parameter passing method one

1, routing configuration

 {
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
 }

2, usage method

// 直接调用$router.push 实现携带参数的跳转
 this.$router.push({
// 这个id是一个变量,随便是什么值都可以
 path: /describe/${id}`,
 })

3, Get method (on describe page)

$route.params.id

Use the above method to get the id value passed from the previous page

vue parameter passing method two

1. Routing configuration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
（这个地方默认配置就可以了，不用做任何的处理）

2. Usage method

  this.$router.push({
   name: 'Describe',
   params: {
   id: id
   }
  })

In the parent component: determine the matching route through the name in the routing attribute, and pass params to pass parameters.

3. Obtaining method (on the describe page)

$route.params.id

You can also use params to obtain it;

vue parameter passing method three

1. Routing configuration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }

(default configuration)

2. Usage method

 this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
（params换成了query）

3. Obtaining method (on the describe page)

$route.query.id

(This place uses query to also obtain the id. The difference from the previous params acquisition is that the id value obtained with query will be displayed in the url, and you can see the value you passed)

props value transfer method

Parent component

(table-data can be named randomly, not a specific value)

<p class="content">
//这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
 <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
</p>

Subcomponent

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}

Prop is one-way binding and props should not be changed inside the subcomponent. However, the value passed by the props here will change as the value of the parent component changes, which is a dynamic change.

Tips for using $route

1, $route.path

Type: string

String, corresponding to the path of the current route, is always resolved to an absolute path, such as "/foo/bar".

2, $route.params

Type: Object

A key/value object, including dynamic fragments and full matching fragments, if there are no

route parameters is an empty object.

3, $route.query

Type: Object

A key/value object representing URL query parameters. For example, for the path /foo?user=1, $route.query.user == 1, or an empty object if there are no query parameters.

4, $route.hash

Type: string

The hash value of the current route (with #), if there is no hash value, it is an empty string.

5, $route.fullPath

Type: string

The URL after completion of parsing, including the full path of query parameters and hash.

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

Recommended reading:

How to quickly solve the problem of jQuery sending garbled Chinese parameters when sending requests

How to use PHP to prevent form duplication submit

The above is the detailed content of How to use vue to participate in router. For more information, please follow other related articles on the PHP Chinese website!