Home > Web Front-end > Vue.js > (Super detailed) How to perform route jump in Vue? Three ways to share

(Super detailed) How to perform route jump in Vue? Three ways to share

青灯夜游
Release: 2022-12-01 20:54:02
forward
17605 people have browsed it

How does vue perform route jump? This article will give you a detailed summary of the three ways to implement routing jumps in vue. I hope it will be helpful to you!

(Super detailed) How to perform route jump in Vue? Three ways to share

1. Using vue-router

##vue-router

Essence is a third party The package needs to be downloaded when using it. [Learning video sharing: vue video tutorial, web front-end video]

##Steps

(7 steps):

1. Download the

vue-router module to the current project

1

<strong> yarn add vue-router</strong>

Copy after login

2. Introduce the VueRouter function into main.js

1

2

<strong>// 引入路由

import VueRouter from "vue-router";</strong>

Copy after login

3. Add to Vue.use() – register the global RouterLink and RouterView components

1

2

<strong>// 注册全局

Vue.use(VueRouter)</strong>

Copy after login

4. Create an array of routing rules – corresponding to the path and component name Relationship

Create an array of routing rules (page components that need to be prepared for switching) and introduce the prepared page components into main.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

const routes = [{

            path: "/",

            redirect: "find" //默认显示推荐组件(路由的重定向)

        },

        {

            path: "/find",

            name: "Find",

            component: Find,

            //二级路由

            children: [{

                    path: "/",

                    redirect: "recom" //默认显示推荐组件

                },

                {

                    path: "ranking", //注意二级路由的路径千万不要加/

                    component: Ranking

                },

                {

                    path: "songlist",

                    component: SongList

                },

            ]

        },

        {

            path: "/my",

            name: "My",

            component: My

        },

        {

            path: "/part",

            name: "Part",

            component: Part

        },

 

        {

            path: "*",

            component: NotFound //定义找不到已有组件时显示404

        },

    ]

Copy after login

5. Use rules to generate routing objects

1

2

3

4

5

<strong>    // 创建路由对象并且传入规则

const router = new VueRouter({

    routes,

    mode: "history" //路由模式(默认为hash模式)

})</strong>

Copy after login

6. Inject routing objects into new Vue instances

1

2

3

4

<strong>new Vue({

    router, //导入路由对象

    render: h => h(App),

}).$mount(&#39;#app&#39;)</strong>

Copy after login

7. Use

router-viewAs a mount point, switch different routing pages

When the hash value path of the url is switched, the corresponding component in the rule is displayed

router-view

Where routing content is implemented, when introducing components, write the places that need to be introduced. It should be noted that when using vue-router to control routing, router-view must be used as a container. (You can first introduce the root component App.vue for self-test)

Note:

Everything must be based on the hash value on the url

2. Declarative-router-link [The simplest way to implement jump]

##1. The component router-link can be used to replace the a tag

router-link
    is vue-router provides a global component
  • router-link will essentially render into a link to attribute equivalent To provide the href attribute (to does not require
  • #)
  • router-link provides the function of declarative navigation highlighting (with its own class name)
The code is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

<template>

  <div>

    <div class="footer_wrap">

      <router-link to="/find">发现音乐</router-link>

      <router-link to="/my">我的音乐</router-link>

      <router-link to="/part">朋友</router-link>

    </div>

    <div class="top">

      <router-view></router-view>

    </div>

  </div>

</template>

//在控制台元素检查时会发现激活的类名 在样式style中定义高亮样式 点击时就会高亮

Copy after login
router-link benefits: comes with the class name when activated, which can be highlighted

2. When jumping to a route, you can pass the value to the component corresponding to the route.

Pass the value to the to attribute on the router-link. The syntax format is as follows:

(Method 1)

to=/path?Parameter name=value

Example:

to="/part?name=Xiao Ming"

The corresponding page component receives the passed value

$route.query.Parameter name

Receives data: $route.query.name

( Method 2)

to="/path/value" (/path/: parameter name needs to be configured in the routing rule)

Example:

to="/part /小王"

Configuration: path:"/part/:username"

The corresponding page component receives the passed value (note the dynamic Parameters need to be received using params)

$route.params.Parameter name

Receive data: $route.params.username

3. Programming - Use JS code to jump

Use JS code to jump

Syntax: Choose either path or name

The difference between

1,

$ router and $ route$router: It is a routing operation object, a write-only object

$route: routing information object, read-only object

$ router operation route jump

1

this.$router.push({ name:‘hello’, query:{ name:‘word’, age:‘11’ } })

Copy after login
$route read Get route parameter reception

1

var name = this.$route.query.name;

Copy after login

2. The difference between route jump method name, path and parameter transfer method params, query (important)

Both path and name route jump methods can use query to pass parameters

Using path method to jump route path will ignore params, so path cannot be used together with params

    It is recommended to use name and query methods to implement route jump
params pass parameters, push can only be name:'xxx', not path:' /xxx', because params can only use name to introduce routes. If path is written here, the parameter receiving page will be undefined! ! !

Passing parameters through params

==Note: ==You don’t need to add

/# when using the name route jump method here. ## Because it is just a name

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.$router.push({ name:&quot;Home&quot;, params:{ id:this.id } })</pre><div class="contentsignin">Copy after login</div></div>

Another page receives:

You need to use params to pass parameters here Write params to receive

1

this.$route.params.id

Copy after login

通过query传参

1

2

3

4

5

6

this.$router.push({

    path:"/Search",

    query:{ //query是个配置项

        age:20

    }

})

Copy after login
Copy after login

另一个页面接收

1

this.$route.query.age

Copy after login
Copy after login

query相当于GET请求,页面跳转的时候,可以在地址栏看到请求参数

uery传参**

1

2

3

4

5

6

this.$router.push({

    path:"/Search",

    query:{ //query是个配置项

        age:20

    }

})

Copy after login
Copy after login

另一个页面接收

1

this.$route.query.age

Copy after login
Copy after login

总结:
query相当于GET请求,页面跳转的时候,可以在地址栏看到请求参数

params相当于POST请求,参数不会在地址栏中显示

(学习视频分享:web前端开发编程基础视频

The above is the detailed content of (Super detailed) How to perform route jump in Vue? Three ways to share. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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