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,
        },
    ],
    // 路由模式
    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>
            <!-- replace 替换历史 -->
            <p><router-link replace active-class="active"
                      :to="`/multilevelRoute/query`">query</router-link></p>
            <p><router-link active-class="active"
                      :to="`/multilevelRoute/param`">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>