Home > Web Front-end > JS Tutorial > body text

How to use vue to participate in router

php中世界最好的语言
Release: 2018-05-28 11:05:51
Original
1573 people have browsed it

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
 }
Copy after login
2, usage method

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

$route.params.id
Copy after login
Copy after login
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
 }
(这个地方默认配置就可以了,不用做任何的处理)
Copy after login
2. Usage method

  this.$router.push({
   name: 'Describe',
   params: {
   id: id
   }
  })
Copy after login
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
Copy after login
Copy after login
You can also use params to obtain it;

vue parameter passing method three

1. Routing configuration

 {
  path: '/describe',
  name: 'Describe',
  component: Describe
 }
Copy after login
(default configuration)

2. Usage method

 this.$router.push({
   path: '/describe',
   query: {
   id: id
   }
  })
(params换成了query)
Copy after login
3. Obtaining method (on the describe page)

$route.query.id
Copy after login
(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>
Copy after login
Subcomponent

props: ['tableData', 'pageInfo'],
data() {
 return {
  tData: this.tableData,
  page: this.pageInfo
 }
}
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!