路由跳转传值一种为路由的动态传值,一种为路由的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
<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