vue-router 路由传参

安装

npm install vue-router

main.js修改

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
// 变量名只能用router
import router from "./router/index"

Vue.config.productionTip = false;

Vue.use(VueRouter);

new Vue({
    render: h => h(App),
    router
}).$mount('#app');

创建js文件, 配置路由器

import VueRouter from "vue-router"
import FirstIndex from "@/pages/FirstIndex"
import MultilevelRoute from "@/pages/MultilevelRoute"
import PropsDemo from "@/pages/PropsDemo"

export default new VueRouter({
    routes: [
        {
            // 别名
            name: "index",
            // 匹配路径
            path: "/index",
            // 匹配组件
            component: FirstIndex
        },
        {
            name: "multilevelRoute",
            path: "/multilevelRoute",
            component: MultilevelRoute,
			//自定义数据
            meta: {
                isAuth: true
            },
            children: [
                {
                    name: "query",
                    path: "query",
                    component: PropsDemo,
                    //路由参数作为prop传入路由组件
                    props(route){
                        return {
                            id: route.query.id
                        }
                    }
                },
                {
                    name: "param",
                    path: "param/:id",
                    component: PropsDemo,
                    //路由参数作为prop传入路由组件
                    props(route){
                        return {
                            id: route.params.id
                        }
                    }
                }
            ]
        },
    ],
    // 路由模式
    mode: "history"
    // mode: "hash"
    // mode: "abstract"
})

一级路由组件

<template>
    <div>
        <div>
            <!-- active-class选择时显示的样式 -->
            <RouterLink active-class="active" to="/index">index</RouterLink>
            <RouterLink active-class="active" to="/multilevelRoute">MultilevelRoute</RouterLink>
        </div>
        <div>
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RouteDemo"
    }
</script>

二级路由组件，给路由传入参数

<template>
    <div>
        <div>
            <!-- 给路由组件传参(query) -->
            <!-- replace 替换历史 -->
            <p><router-link replace active-class="active"
                      :to="`/multilevelRoute/query?id=${myId}`">query传参方式一</router-link></p>
            <p><router-link active-class="active"
                      :to="{pathname: '/multilevelRoute/query',query: {id: myId}}">query传参方式二</router-link></p>
            
            <!-- 给路由组件传参(param) -->
          	<p><router-link active-class="active"
                      :to="`/multilevelRoute/param/${myId}`">param传参方式二</router-link></p>
            <p><router-link active-class="active"
                      :to="{name: 'param',params: {id: myId}}">param传参方式二</router-link></p>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'

    export default {
        name: "MultilevelRoute",
        data() {
            return {
                myId: nanoid()
            }
        }
    }
</script>

接收参数

<template>
    <div>
        <p>接收到的query参数: {{this.$route.query.id}}</p>
        <p>接收到的params参数: {{this.$route.params.id}}</p>
    </div>
</template>

<script>
    export default {
        name: "PropsDemo",
    }
</script>