路由声明式导航

main.vue

<template>
    <div>
        <router-link to="/child" tag="li" activeClass="act">child</router-link>
        <router-link to="/child1" tag="li" activeClass="act">child1</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    import child from './components/child'
    import child1 from './components/child1'
    export default {
        data() {
            return {
            }
        },
        methods: {
            hello() {
                alert('hello');
            }
        },
        components: {child,child1}
    }
</script>

<style scoped>
    .act {
        color: red;
    }
</style>

child.vue(child1.vue)

<template>
    <div>
        我是子组件
        <slot></slot>
    </div>
</template>

<script>
    export default {
        
    }
</script>