Home > Web Front-end > Vue.js > Super detailed! Summarize the 3 ways Vue implements routing jumps!

Super detailed! Summarize the 3 ways Vue implements routing jumps!

藏色散人
Release: 2022-08-10 17:15:57
forward
3352 people have browsed it

1. Using vue-router

vue-router Essence is a third-party package that needs to be downloaded when used [Related recommendations:vue.js video tutorial

Steps (7 steps):

1. Downloadvue- routerModule to current project

 yarn add vue-router
Copy after login

2.Introduce VueRouter function in main.js

// 引入路由import VueRouter from "vue-router";
Copy after login

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

// 注册全局Vue.use(VueRouter)
Copy after login

4. Create routing rule array – Correspondence between path and component name

Create Array of routing rules (page components that need to be switched) Introduce the prepared page components into main.js

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

    // 创建路由对象并且传入规则const router = new VueRouter({
    routes,
    mode: "history" //路由模式(默认为hash模式)})
Copy after login

6. Inject the routing object into the new Vue instance

new Vue({
    router, //导入路由对象
    render: h => h(App),}).$mount('#app')
Copy after login

7. Use router-view as the mount point to switch between different Routing page

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

router-view Implementation Where the routing content is, write the place that needs to be introduced when introducing components. 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 It is vue-router that provides a global component
  • router-link will actually eventually be rendered into a link to attribute which is equivalent to providing the href attribute (toNo need#)
  • router-link provides the function of declarative navigation highlighting (with its own class name)

The code is as follows :

<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: It comes with the class name when activated, which can be highlighted

2. When jumping the route, you can give The value passed in the component corresponding to the route

is passed 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

Receive data: $route.query.name

(Method 2)

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

Example:

to="/part/小王"

Configuration:

path:"/part/:username"

The corresponding page component receives the passed value (note that dynamic parameters need to be received with 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

1. The difference between

$ router and $ route

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

$route: A routing information object, a read-only object

$ router operation route jump

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

$route reads routing parameters and receives

var name = this.$route.query.name;
Copy after login

2. Route jump method name, path and The difference between parameter passing methods params and query (important)

path and name routing jump methods can both be passed using query parameters

    Using path method to jump routing path will ignore params, so path cannot be used with params
  • It is recommended to use name and query methods to implement route jump
When passing parameters in params, 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

this.$router.push({
    name:"Home",
    params:{
        id:this.id    }})
Copy after login
Another page receives:

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

this.$route.params.id
Copy after login
Pass parameters through query

this.$router.push({
    path:"/Search",
    query:{ //query是个配置项
        age:20
    }})
Copy after login
Copy after login

Receive from another page

this.$route.query.age
Copy after login
Copy after login

query is equivalent to a GET request. When the page jumps, you can see the request parameters in the address bar

uery Passing parameters **

this.$router.push({
    path:"/Search",
    query:{ //query是个配置项
        age:20
    }})
Copy after login
Copy after login

Another page to receive

this.$route.query.age
Copy after login
Copy after login
Summary:

query is equivalent to a GET request. When the page jumps, you can see the request parameters in the address bar.

params is equivalent to a POST request. The parameters will not be displayed in the address bar.

The above is the detailed content of Super detailed! Summarize the 3 ways Vue implements routing jumps!. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
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