vue路由视图命名

<body>
    <div id="app">
        <p @click="go">hello app!</p>
        <p @click="pas">back path</p>
        <router-view name="a"></router-view>
        <router-view name="b"></router-view>
    </div>
   
</body>
<script>
const Foo = { template: '<div>foo</div>' };
const Baz = { template: '<div>test</div>' };
const Aaz = { template: '<div>Aaz</div>' };
const router = new VueRouter({
    routes : [
        {
            path: '/',
            components: {
                default: Foo,
                a: Baz,
                b: Foo
            }
        },
        {
            path: '/home',
            components: {
                default: Foo,
                a: Foo,
                b: Aaz
            }
        }
    ]
});

const app = new Vue({
    router,
    methods:{
        go(){
            router.push({
                path: '/home'
            });
        },
        pas(){
            router.push({
                path: '/'
            });
        }
    }
}).$mount('#app');

一个页面里面可以多视图，不同的链接可以导航到同一个页面，但是页面可以根据参数渲染不同的组件形式

vue路由 视图命名

vue路由视图命名