Как определить компоненты vue-router внутри html? - PullRequest
Новая
       14

Как определить компоненты vue-router внутри html?

0 голосов
/ 18 февраля 2019

Я использую django + vue.js + vue-router.js для создания своего проекта.Я пытаюсь использовать Vue-маршрутизатор в одной HTML-странице.Некоторое время я искал, все примеры используют компоненты .vue или определяют шаблоны компонентов в js-части просто так: 

<body>
    <div id="app">
        <div>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }

        const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]

        const router = new VueRouter({
            routes
        })

        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

Что мне нужно, так это определить шаблон вне js-частиэто: 

<body>
    <div id="app">
        <div>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <template id="Foo">
        <div>this is Foo</div>
    </template>
    <template id="Bar">
        <div>this is Bar</div>
    </template>

    <script>
        const Foo = { template: '#Foo' }
        const Bar = { template: '#Bar' }

        const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]

        const router = new VueRouter({
            routes
        })

        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

Я пробовал это, но не работает.Итак, как определить компоненты vue-router внутри html?Я новичок с Vue ..

1 Ответ

0 голосов
/ 18 февраля 2019

Вам нужно добавить <router-view/> в HTML-файл.например, 

const Foo = { template: '<div>this is Foo</div>' }
const Bar = { template: '<div>this is Bar</div>' }

const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]

    const router = new VueRouter({
        routes
    })

    const app = new Vue({
        router
    }).$mount('#app')
<div id="app">
  <router-view/>
</div>
...