vue学习-13路由的query参数，props传参，以及编程式路由导航栏
注意，在看此篇之前，建议搭配12的路由组件的基本使用一起观看，本节的所有东西均在12的基础上进行。
往期回顾：
vue学习-12路由组件的基本使用
vue的query传参
在Vue中，我们通常通过props传递参数给组件。然而，如果你想从父组件向子组件传递参数（例如查询参数），你可以使用 props 和自定义事件来实现。
假设你有一个父组件和一个子组件，你想从父组件向子组件传递一个名为 query 的查询参数。以下是如何实现这个功能的步骤：
在子组件中定义一个 prop，用于接收父组件传递的查询参数：
// 子组件 ChildComponent.vue
<template>
<div>
div>
template>
<script>
export default {
props: {
query: {
type: Object, // 确保传入的参数类型是对象
required: true, // 设置为必需，以便在父组件中提供该 prop
},
},
};
script>
在父组件中，通过自定义事件将查询参数传递给子组件：
<template>
<div>
<child-component @receive-query="handleQuery">child-component>
div>
template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleQuery(query) {
// 在这里处理或修改查询参数，然后将其传递给子组件
this.$emit('send-query', query); // 发送查询参数给子组件作为自定义事件 'send-query'
},
},
};
script>
现在，在子组件中监听自定义事件 send-query，并接收父组件传递的查询参数：
// 子组件 ChildComponent.vue（与上面的代码相同）
<template>
<div>
div>
template>
<script>
export default {
props: {
query: {
type: Object, // 确保传入的参数类型是对象
required: true, // 设置为必需，以便在父组件中提供该 prop
},
},
mounted() {
// 监听自定义事件 'send-query'，并在事件触发时更新查询参数的值
this.$on('send-query', (newQuery) => {
this.query = newQuery; // 更新查询参数的值到组件内部的数据属性中，而不是props上的属性值上。这样可以避免双向绑定带来的问题。如果需要双向绑定，请使用 v-model。
});
},
};
script>
结合12的案例进行：
Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}router-link>
li>
ul>
<hr/>
<router-view>router-view>
div>
template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:"001",title:"消息001"},
{id:"002",title:"消息002"},
{id:"003",title:"消息003"}
]
}
},
}
script>
<style>
style>
新创建一个Detail.vue文件
<template>
<ul>
<li>消息编号:{{$route.query.id}}li>
<li>消息标题:{{$route.query.title}}li>
ul>
template>
<script>
export default {
name:'Detail',
mounted(){
console.log(this.$route);
}
}
script>
<style>
style>
在router/index.js中添加
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
//引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';
import Detail from '../pages/Detail.vue';
//创建并暴露一个路由器
export default new VueRouter({
//一组路由
routes:[
{
path:"/about",
component:About,
children:[//配置子路由(也就是路由的嵌套)
{
path:'news',
component:News
},
{
path:'message',
component:Message
}
]
},
{
path:"/home",//路由的路径
component:Home,//要跳转的组件
children:[//配置子路由(也就是路由的嵌套)
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail
}
]
}
]
}
]
});
路由的props传参
Vue路由的props传参是指在使用Vue Router时，可以通过props将参数从父组件传递给子组件。这在需要向子组件传递一些数据时非常有用。
以下是如何在Vue路由中使用props传参的示例：
在项目中创建一个父组件和一个子组件。例如，创建一个名为Parent.vue的父组件和一个名为Child.vue的子组件：
<template>
<div>
<h1>这是父组件h1>
<child-component :my-prop="parentData">child-component>
div>
template>
<script>
import ChildComponent from './Child.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentData: '这是父组件的数据',
};
},
};
script>
<template>
<div>
<h2>这是子组件h2>
<p>{{ myProp }}p>
div>
template>
<script>
export default {
props: ['myProp'], // 声明接收父组件传递的props
};
script>
在上面的示例中，我们通过:my-prop="parentData"将父组件的数据parentData传递给子组件。子组件通过props: [‘myProp’]声明接收父组件传递的props。
确保在路由配置文件（如router.js或index.js）中定义了相应的路由，以便可以访问这两个组件：
// router.js 或 index.js
import Vue from 'vue';
import Router from 'vue-router';
import Parent from './components/Parent.vue';
import Child from './components/Child.vue';
Vue.use(Router);
export default new Router({
routes: [
{ path: '/parent', component: Parent },
{ path: '/child', component: Child },
],
});
现在，当访问/parent和/child路径时，你将看到父组件和子组件分别显示它们自己的内容，并通过props传递了数据。
利用12的案例进行
Detail.vue
<template>
<ul>
<li>消息编号:{{id}}li>
<li>消息标题:{{title}}li>
ul>
template>
<script>
export default {
name:'Detail',
props:['id','title'],
mounted(){
console.log(this);
}
}
script>
<style>
style>
router/index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
//引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';
import Detail from '../pages/Detail.vue';
//创建并暴露一个路由器
export default new VueRouter({
//一组路由
routes:[
{
path:"/about",
component:About,
children:[//配置子路由(也就是路由的嵌套)
{
path:'news',
component:News
},
{
path:'message',
component:Message
}
]
},
{
path:"/home",//路由的路径
component:Home,//要跳转的组件
children:[//配置子路由(也就是路由的嵌套)
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail,
//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传递给Detail组件
//props:{a:1,b:'hello'}
//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
//props:true
//props的三种写法，值为函数
// 路由的props配置
// 作用:让路由组件更方便的收到参教
props($route){
return {
id:$route.query.id,
title:$route.query.title
}
}
}
]
}
]
}
]
});
vue的编程式路由导航栏
说到这个，实际上我们在项目中开发中很多时候都用的这一套。
Vue编程式路由导航栏是指在使用Vue Router时，通过编程的方式实现路由的跳转和导航栏的更新。这种方式相比于声明式的导航方式，更加灵活和可控。
我们通过一个小案例进行，演示如果进行编程式路由导航栏：
在项目中创建一个名为App.vue的根组件，并在其中添加一个编程式导航栏：
<template>
<div id="app">
<nav>
<router-link to="/">首页router-link>
<router-link to="/about">关于我们router-link>
<router-link to="/contact">联系我们router-link>
nav>
<router-view>router-view>
div>
template>
<script>
export default {
name: 'App',
};
script>
在上面的代码中，我们使用了
在main.js文件中，导入Vue、Vue Router和App.vue，并将Vue Router与App.vue进行关联：
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: () => import('./components/Home.vue') },
{ path: '/about', component: () => import('./components/About.vue') },
{ path: '/contact', component: () => import('./components/Contact.vue') },
];
const router = new VueRouter({
routes,
});
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
至此，当用户点击导航链接的时候，页面将自动跳转到对应的路由路径，并显示相应的组件内容，同时导航栏也会根据当前的路由状态进行更新。
注意：
- 本节中的所有案例均在安装了路由的前提条件下进行。
- 本节的案例有些只提供一部分，哪些并未提供的，相信读者都可以独立完成。