Могу ли я импортировать один файловый компонент, используя Vue и Vue Router CDN? - PullRequest
Новая
       5

Могу ли я импортировать один файловый компонент, используя Vue и Vue Router CDN?

0 голосов
/ 13 ноября 2018

В настоящее время я использую Vue и Vue Router CDN. Я хочу импортировать один файловый компонент (user.html) в мой index.html с помощью маршрутизатора Vue. Но когда я нажимаю «Перейти к пользователю», данные не отображаются. Я прочитал несколько руководств о маршрутизаторе Vue, но они использовали NPM или CIL вместо Vue CDN. Index.html 

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
    <router-link to='/User.html'>Go to User</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>
<script>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const User = { template: '#test'}
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{
  path:'/User.html', component: User
}
]

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

User.html 

<template id = "test">
fsjdfjdfldskjflkd
</template>

1 Ответ

0 голосов
/ 14 ноября 2018

Я думаю, что было недоразумение. Насколько я могу судить, вы пытаетесь загрузить User.html так, как если бы вы загружали файл .vue, но это не сработает, если вы не используете Webpack для создания своего проекта, поскольку тип файла .vue то, что vue-loader проект отвечает за синтаксический анализ.

Vue Router CDN означает, что вы не строите с помощью Webpack, поэтому загрузка компонента, который вы делаете, невозможна. Вы можете настроить Vue Router для обслуживания файла User.html, но этот файл не может быть компонентом шаблона, поскольку в режиме CDN Vue Router не знает, какие файлы находятся на вашем сервере, и не может просто получить их.

Так что вам нужно сделать один из следующих трех вариантов:

Вариант 1. Начните использовать Webpack для своего проекта

Это то, что я рекомендую вам делать. Вы обнаружите, что ваш проект будет работать лучше, и его будет легче разрабатывать, используя его.

Вариант 2. Используйте правильный синтаксис шаблона для CDN

Это, например: 

var mytemplate = `<div>
<h1>This is my template</h1>
</div>`

Vue.component('mycomp1', {
    template: mytemplate
});

Vue.component('mycomp2', {
    template: `
        <div>
            Hello, {{ name }}!
        </div>
    `,
    props: ['name'],
});

Вы не можете загружать другие файлы в качестве шаблонов, когда не создаете с помощью Webpack. Webpack помещает их в ваше одностраничное приложение для вас, Vue Router не знает, что находится внутри User.html, и Vue не может использовать его в качестве шаблона. Vue Router можно попросить перенаправить на полностью функциональную страницу User.html, а не просто использовать ее в качестве шаблона.

Вариант 3. Использование Ajax-запросов для извлечения файла шаблона

Это то, что я НАСТОЯТЕЛЬНО ПРИЗЫВАЮ ВАМ НЕ ДЕЛАТЬ, но ради полноты вы можете использовать версию CDN, если вы извлекаете содержимое файла User.html с помощью запроса Ajax и создаете из него компонент.

Я действительно, очень рекомендую вам прекратить использовать версию CDN и вместо этого пойти на решение на основе Webpack, уступить темной стороне! Или сделайте его еще проще и используйте вместо него Nuxt.js, поскольку новичкам легче его использовать.

...