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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在父组件中，通过自定义事件将查询参数传递给子组件：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

现在，在子组件中监听自定义事件 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

结合12的案例进行：
Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                
                {m.title}}   -->

                
                <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

新创建一个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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在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
                        }
                    ]
                }
            ]
        }
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

路由的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<template>
  <div>
    <h2>这是子组件h2>
    <p>{{ myProp }}p>
  div>
template>

<script>
export default {
  props: ['myProp'], // 声明接收父组件传递的props
};
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

在上面的示例中，我们通过: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 },
  ],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

现在，当访问/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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在上面的代码中，我们使用了组件来创建导航链接，并通过to属性指定了对应的路由路径。

在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');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

至此，当用户点击导航链接的时候，页面将自动跳转到对应的路由路径，并显示相应的组件内容，同时导航栏也会根据当前的路由状态进行更新。

注意：

1. 本节中的所有案例均在安装了路由的前提条件下进行。
2. 本节的案例有些只提供一部分，哪些并未提供的，相信读者都可以独立完成。