Parâmetros de roteamento do Vue-router

vue-router fornece duas formas de estilos de passagem de parâmetro:
estilo tradicional ( ?k0=v0&k1=v1 ), estilo Restful ( /:key)
os parâmetros do estilo tradicional são armazenados no meio querye os parâmetros do estilo Restful são armazenados no paramsmeio

estilo tradicional

Exemplo de URL: http://127.0.0.1:5173/user?userid=123&username=张三
Usando o estilo tradicional, src/router/index.jssem necessidade de ajustes, o conteúdo é o seguinte:

import {
    
     createRouter, createWebHashHistory } from 'vue-router'

import Main from '../views/Main.vue'
import User from '../views/User.vue'

import NotFound from '../views/NotFound.vue'

const routes = [
  {
    
    
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    
    
    path: '/user',
    name: 'User',
    component: User,
  },
  {
    
     path: '/:path(.*)', component: NotFound },
]

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

export default router

Configurar parâmetros de roteamento

// App.vue
<template>
  <router-link to="/user?userid=123&username=张三">go User Page</router-link>
  <router-link :to="{path:'/user', query:{username:'张三', userid:123}}">go User Page</router-link>
  // 推荐
  <router-link :to="{name:'User', query:{username:'张三', userid:123}}">go User Page</router-link>
  <router-view></router-view>
</template>

User.vueObter parâmetros em

// 组合式
<script setup>
  import {
    
     useRoute } from 'vue-router'
  const route = useRoute()
  const userid = route.query.userid
  const username = route.query.username
</script>

// 选项式
<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        userid: '',
        username: ''
      }
    },
    mounted() {
    
    
      this.userid = this.$route.query.userid
      this.username = this.$route.query.username
    },
  }
</script>

Passagem de parâmetro de estilo repousante

Exemplo de URL: http://127.0.0.1:5173/user/123/张三
modifique src/router/index.jsda seguinte forma:

import {
    
     createRouter, createWebHashHistory } from 'vue-router'

import Main from '../views/Main.vue'
import User from '../views/User.vue'

import NotFound from '../views/NotFound.vue'

const routes = [
  {
    
    
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    
    
    path: '/user/:userid/:username',
    name: 'User',
    component: User,
  },
  {
    
     path: '/:path(.*)', component: NotFound },
]

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
})

export default router

Configurar parâmetros de roteamento

// App.vue
<template>
  <router-link to="/user/123/张三">go User Page</router-link>
  // 下面的方式不可用
  // [Vue Router warn]: Path "/user" was passed with params but they will be ignored. Use a named route alongside
  // params instead.
  <router-link :to="{path:'/user', params:{username:'张三', userid:123}}">go User Page</router-link>
  // 推荐
  <router-link :to="{name:'User', params:{username:'张三', userid:123}}">go User Page</router-link>
  <router-view></router-view>
</template>

User.vueObter parâmetros em

// 组合式
<script setup>
  import {
    
     useRoute } from 'vue-router'
  const route = useRoute()
  const userid = route.params.userid
  const username = route.params.username
</script>

// 选项式
<script>
  export default {
    
    
    data() {
    
    
      return {
    
    
        userid: '',
        username: ''
      }
    },
    mounted() {
    
    
      this.userid = this.$route.params.userid
      this.username = this.$route.params.username
    },
  }
</script>

Os dois métodos acima de passar parâmetros podem basicamente concluir o projeto após o aprendizado

expandir

• mapeamento de parâmetros

Os parâmetros são mapeados por mapping props. Por padrão, apenas paramsos parâmetros no mapeamento são implementados da seguinte forma:
Modificarsrc/router/index.js

const routes = [
  {
    
    
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    
    
    path: '/user/:userid/:username',
    name: 'User',
    component: User,
    // 添加 
    props: ture
  },
  {
    
     path: '/:path(.*)', component: NotFound },
]

Depois que a chave de mapeamento é ativada, ela precisa propsser recebida na página de salto ao mesmo tempo

// 组合式
<script setup>
  import {
    
     useRoute } from 'vue-router'

  defineProps({
    
    
    userid: String,
    username: String
  })
</script>
//选项式
<script>
  export default {
    
    
    props: {
    
    
      userid: String,
      username: String
    }
  }
</script>

Você também pode querymapear os parâmetros em , que é um pouco mais problemático, da seguinte forma:

// src/router/index.js
const routes = [
  {
    
    
    path: '/',
    name: 'Main',
    component: Main
  },
  {
    
    
    path: '/user',
    name: 'User',
    component: User,
    // 添加 
    // props: ture
    // 这里我是直接将query 给映射过去了，当然如果你只有一个参数的话，你也可以
    // props: route => ({ userid: route.query.userid })
    props: route => ({
    
     query: route.query })
  },
  {
    
     path: '/:path(.*)', component: NotFound },

Os valores são os seguintes:

// User.vue
<template>
  <h2>User Page</h2>
  <div>{
   
   { query.userid }}</div>
  <div>{
   
   { query.username }}</div>
</template>
// 组合式
<script setup>
defineProps({
      
      
  query: {
      
      
    type: Object,
    default() {
      
      
      return {
      
      }
    }
  }
})
</script>
// 选项式
<script>
export default {
      
      
  props: {
      
      
    query: {
      
      
      type: Object,
      default() {
      
      
        return {
      
      };
      }
    }
  }
}
</script>

Além do método de passagem de parâmetros mencionado acima, você também pode usar os métodos de 共享全局变量, e, amigos interessados ​​podem tentarCookielocalStorage

Consulte https://blog.csdn.net/lwf3115841/article/details/129115106