Web front end ---- [Vue] Vue routing parameters (query and params)

Table of contents

Preface

Why use routing

Routing route and router router

How routing works in Vue

Install and configure vue-router

Using VueRouter

multi-level routing

Routing parameters

query parameters

params pass parameters

---

Preface

This article introduces routing-related knowledge and routing parameters.

Why use routing

For single-page application development, only components are replaced and the page is not refreshed frequently. At the same time, it is easier to maintain, has higher development efficiency, and has higher code utilization.

Routing route and router router

Each route is composed of key-value pairs, that is, the corresponding relationship between paths and components, and this set of corresponding relationships is called routing.

Routers manage routing, and their essence is to manage multiple sets of correspondences.

The router will constantly monitor the path. As long as the path changes, it will go to the routes it manages to find the corresponding route and complete the route switching (if the key (path) changes, it will find the corresponding route of the changed key. value (component))

How routing works in Vue

When we click to trigger the event to change the path, the router monitors the path change and immediately finds the corresponding component in the route it manages, thereby completing the switch.

Install and configure vue-router

npm i vue-router@3

(vue2 and vue-router3,vue3 and vue-router4)

Configure vue-router in main.js

After installation, import it in main.js

Global registration use

At this time, the vue instance will have an additional router configuration item.

Create a folder in src, router

Create a new index.js file in the router (manage the configured route routing object storage)

Export this file

Import in main.js file

Place the imported routing object in the router configuration item

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import Vuerouter from 'vue-router'

Vue.use(Vuerouter)

import router from './router'

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

Using VueRouter

In the index.js file under the router folder

ImportVueRouter

Create router object

All router objects are routing objects.

Every object has

path:''path

component: component

Export router object

// 导入vue-router
import VueRouter from "vue-router";

// 创建路由器对象，在里面配置路由对象
const router = new VueRouter({
    // 路由对象
    routes:[
        // 这就是一个路由
        {
            // 路径
            path:'',
            // 路径对应的组件
            component:''
        }
    ]
})

// 导出路由器对象
export default router

When using VueRouer, you cannot use a hyperlink tag

Officially provided by vue

<router-link to="path"></rouer-link>

and routing view

The place where the component corresponding to the path is displayed

<router-view></router-view>

example:

Import the two created components into the router and configure the path

When you click on the path, the corresponding component will be displayed in the routing view.

multi-level routing

Based on the above cases

Create two components

Import the two components into the router

In the index.js file of router

Just add a children configuration item to the configuration item.

Note, do not add / in front of the path in children

In the children configuration item, there are also path and component components.

in the upper level component

Routing parameters

query parameters

Query parameters are divided into ordinary parameters and object parameters.

String concatenation method to pass parameters:

Take the above case as an example

use? Pass parameters in the form of key=value&key2=value

Create a city component. The content in the component is dynamic and determined based on the different parameters passed.

Print $route.query in mounted function

Directly use interpolation syntax for dynamic rendering

To optimize the above code, it is troublesome to write parameters directly in the path.

This method is string splicing

Passing parameters in object form:

followed by { }

path:'Component path',

query:{parameters passed}

params pass parameters

String concatenation method

Directly follow to followed by the path and parameters separated by /

In the index.js file in the router

Need to be added after the path

path:'path/:parameter name/:parameter name '

form

When rendering

$route.params

Print in mounted hook function

Optimize the above code

Passing parameters in object form

At this time, path cannot be used after to, and name must be used.

The name is configured and defined in the routing object in the router's index.js file.

query parameter code

<template>
  <div class="city">
    <h2>市</h2>
   <ul>
    <li>
      <!-- 对象形式 -->
      <router-link :to="{
        path:'/anhui/city',
        query:{
          a1:aq[0],
          a2:aq[1],
          a3:aq[2],
          a4:aq[3],
        }
      }">安庆</router-link>
    </li>
    <!-- 字符串拼接形式 -->
    <li><router-link :to="`/anhui/city?a1=${hf[0]}&a2=${hf[1]}&a3=${hf[2]}&a4=${hf[3]}`">合肥</router-link></li>
    <li>阜阳</li>
    <li>亳州</li>
   </ul>
   <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'heFei',
    data(){
      return {
        aq:['宿松','太湖','怀宁','潜山'],
        hf:['瑶海','蜀山','包河','庐阳']
      }
    }
}
</script>

params parameter code

<template>
  <div class="city">
    <h2>市</h2>
    <ul>
      <!-- 字符串拼接形式 -->
      <li>
       <router-link :to="`/jiangsu/city/${nj[0]}/${nj[1]}/${nj[2]}/${nj[3]}`">南京</router-link>
      </li>
      <li>
        <!-- 对象形式 -->
        <router-link :to="{
          name:'cz',
          params:{
            a1:cj[0],
            a2:cj[1],
            a3:cj[2],
            a4:cj[3],
          }
        }">常州</router-link>
      </li>
      <li>苏州</li>
      <li>无锡</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'jiangSu',
    data(){
      return {
        nj:['玄武区','秦淮区','鼓楼区','浦口区'],
        cj:['天宁区','钟楼区','新北区','武进区']
      }
    }
}
</script>