vue路由的动态传值详解

路由跳转传值一种为路由的动态传值，一种为路由的get传值,先来介绍路由的动态传值。

一.路由的动态传值

路径要求严格，在配置路由的时候设置动态传值

1.基本配置

index.js 配置路由的节点

// 配置的路由节点
import Home from '../views/Home.vue'
import about from '../views/About'
//在配置路由的时候设置动态传值 类似/:id
export default[
  {
    
    
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    
    
    path: '/about',
    name: 'About',
    component:about,
  }
]

router.js 配置整个的路由

//配置整个路由
import {
    
     createRouter, createWebHistory } from 'vue-router'
import routes from '../router/index'
const router = createRouter({
    
    
    history: createWebHistory(),
    routes
  })
export default router
  

main.js

import {
    
     createApp } from 'vue'
import App from './App.vue'
//引入路由文件
import router from './router/router'
const app=createApp(App);
app.use(router);
app.mount('#app');

主页面：App.vue

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
    
  }
</script>

两个子组件：
Home.vue

<template>
  <div class="home">
    home组件
  </div>
</template>
<script>
export default {
    
    
  name: 'Home',
}
</script>

About.vue

<template>
  <div id="about">
    about组件
  </div>
</template>
<script>
export default {
    
    
  name:'about',
}
</script>

界面结果显示：

2.在配置的路由节点动态传值

在配置的路由里进行传值
index.js

// 配置的路由节点
import Home from '../views/Home.vue'
import about from '../views/About'
//在配置路由的时候设置动态传值 类似/:id
export default[
  {
    
    
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    
    
    path: '/about/:id',
    name: 'About',
    component:about,
  }
]

主页面：App.vue

扫描二维码关注公众号，回复： 13344377 查看本文章

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    //如果配置动态传值 点击跳转的时候也要进行传值
    <router-link to="/about/1000">About</router-link>//此为静态的传的值1000
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
    
  }
</script>

界面结果显示：

• 如何获取路由的值在About.vue里

About.vue

<template>
  <div id="about">
    about组件
  </div>
</template>
<script>
export default {
    
    
  name:'about',
  mounted(){
    
    
  //挂载完成获取路由的动态传值
  //this.$route 此api是当前路由的相关匹配参数
    console.log(this.$route.params.id);
}
</script>

结果显示：

• 如果想要在App.vue绑定动态传值

App.vue

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    //动态绑定 使用es6 字符串模板
    <router-link :to="`/about/${id}`">About</router-link>
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
   data(){
    
    
    return{
    
    
      id:123456
    }
  }
  }
</script>

界面结果显示：

• 如果路由上传多个值

index.js

// 配置的路由节点
import Home from '../views/Home.vue'
import about from '../views/About'
export default[
  {
    
    
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    
    
  //在后面继续添加
    path: '/about/:id/:name',
    name: 'About',
    component:about,
  }
]

App.vue也要做出相应的变化

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link :to="`/about/${id}/${name}`">About</router-link>
    <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
  data(){
    
    
    return{
    
    
      id:123456,
      name:'jiang',
    }
  }
  }
</script>

界面结果显示：

vue 路由get传值链接：
https://blog.csdn.net/weixin_47863547/article/details/119189387