Реализация Vue Router в проекте Umbraco 8 - PullRequest
Новая
       16

Реализация Vue Router в проекте Umbraco 8

0 голосов
/ 24 апреля 2019

Я пытаюсь создать полностью работающую веб-страницу Umbraco 8, но с vue маршрутизацией, и я даже не уверен, возможно ли это больше.

Насколько я знаю, в этой среде я вынужден работать с Vue из CDN, поэтому я включил это.

Я пытался создать x-шаблоны в моем базовом файле Layout.cshtml, в моем (в данном случае) неиспользованном @RenderBody (), , потому что это необходимо, верно? - как это: 

const Home = {
    template: '#home'
}

const Component1 = {
    template: '#component1'
};

const routes = [
    { path: '', component: Home },
    { path: '/1', component: Component1 }
]

const router = new VueRouter({
    routes
});

new Vue({
    router
}).$mount('#app');
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <title>UmbVue</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/style/style.min.css" rel="stylesheet" />
</head>
<body>
    @RenderBody()

    <div id="app">
        <h1>Basic Vue-Router</h1>
        <router-view></router-view>
    </div>
    
    <script type="text/x-template" id="home">
      <div>
          <h2>Home dasdsa</h2>
          <ul>
              <li>
                  <router-link to="/1">Page</router-link>
              </li>
          </ul>
      </div>
    </script>


    <script type="text/x-template" id="component1">
        <div>
            <h2>Component 1</h2>
            <ul>
                <li>
                    <router-link to="/">Home</router-link>
                </li>
            </ul>
        </div>
    </script>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>

Это на самом деле работает!

Это было бы, несколько , было бы хорошо, если бы я мог поместить соответствующие x-шаблоны в свои собственные файлы .cshtml (шаблоны Umbraco). Таким образом, я все еще смогу легко получить данные из бэкэнда.

Обзор

| -Layout.cshtml (включая <div id="app"><router-view></router-view></div>)

| --Home.cshtml (как-то используется как шаблон, может быть, x-template?)

| --Page.cshtml (как-то используется как шаблон, может быть, x-template?)

Со всеми js в app.js.

Я понимаю, что это не сработает из-за маршрутизации Umbraco по умолчанию с RenderBody (), поэтому я обращаюсь за советом.

...