记录Vue中router-view子组件与父组件传值(webpack)_vue3 router-view传值

应用情况

为了避免在vue项目中每页都配置导航菜单，所以直接在app.vue中配置了导航菜单，但是发现当前激活菜单的 index虽然能在第一次选中是高亮，但是刷新页面后又会显示选中默认的index，如下情况：

刷新后(同一请求路径)：

找了好多地方发现可以按照下面的方法解决，分两种情况：

页面代码

首先是app.vue的代码

<template>
    <div id="app">
        <el-container>
            <el-header>
                <el-menu default-active="1" class="el-menu-demo" :router="true" mode="horizontal">
                    <el-menu-item index="/"><img :src="$publicPath+'img/logo.png'" class="logo" /></el-menu-item>
                    <el-menu-item index="Home">后台管理系统</el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu :default-active="defaultActive" :router="true" class="el-menu-vertical-demo">
                        <el-menu-item index="Home">
                            <i class="el-icon-menu"></i>
                            <span slot="title">首页</span>
                        </el-menu-item>
                        <el-submenu index="User">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="User">用户权限管理</el-menu-item>
                        </el-submenu>

                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
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

路由代码：

import VueRouter from "vue-router"
import Vue from "vue"
import Home from "@/components/Home"
import User from "@/components/User/User"


/**
 * 安装插件
 */
Vue.use(VueRouter)

/**
 * 创建路由对象
 * @type {*[]}
 */
const routes = [
    {
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/user',
        component: User
    }
]

/**
 * 初始化路由 配置
 * @type {VueRouter}
 */
const router = new VueRouter({
    routes,
    mode: 'history'
})

/**
 * 导出路由
 */
export default router



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

一、子组件传值给父组件

首先修改app.vue(父组件):

<router-view @getIndex="activeChange" ></router-view>
1

添加方法js：

 methods: {
	activeChange(val) {
		this.defaultActive = val                
	}
  }
1
2
3
4
5

在user.vue中设置(子组件)：

    export default {
        name: 'User',
        props: {
            msg: String
        }, data() {
            return {
                defaultActive: 'User'               
            }
        }, methods: {
           
        },
        mounted() {
            this.$emit('getIndex', this.defaultActive);            
        }
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这样就可以刷新后也可以选中正确的index.

二、父组件传值给子组件

这种情况适用于公共模块，比如搜索功能。
配置方法如下：
app.vue（父组件）：

<router-view  :searchVal="searchVal"></router-view>
1

searchVal: '',  // data里面申明
this.searchVal = ‘需要传给子组件的值’;    // 在需要传值的方法中处理
1
2

search.vue（子组件）:

props: ['searchVal'],

watch: {
      searchVal: function (val) {       
       console.log(val);   // 接收父组件的值
      }
    },

1
2
3
4
5
6
7
8