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>

在上面的代码中,我们使用了组件来创建导航链接,并通过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. 本节的案例有些只提供一部分,哪些并未提供的,相信读者都可以独立完成。

你可能感兴趣的:(#,Vue学习,vue.js,学习,javascript)