Как интегрировать мой шаблон начальной загрузки в vue.js - PullRequest
Новая
       5

Как интегрировать мой шаблон начальной загрузки в vue.js

0 голосов
/ 28 июня 2018

Я новичок в Vue JS. Я хочу интегрировать мой существующий шаблон Bootstrap в VUE JS.

Я установил Vue JS 2 с CLI с Webpack.

внутри src папки, у меня есть структура ниже.

  • активы
  • компоненты
  • маршрутизатор
  • App.vue
  • main.js 

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import AppContainer from '@/components/AppContainer'
import Contact from '@/components/Contact'
import About from '@/components/About'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'AppContainer',
      component: AppContainer,
      children: [
        {
          path: '/about',
          alias: '',
          component: About,
          name: 'About',
          meta: {description: 'Overview of environment'}
        }, 
        {
          path: '/contact',
          alias: '',
          component: Contact,
          name: 'Contact',
          meta: {description: 'Overview of environment'}
        },
      ]
    }
  ]
})

App.vue

<template>
  <div id="app">
    <!-- <router-link :to="{ name: 'About' }">About</router-link>
    <router-link to="/contact">Contact</router-link> -->
    
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

component/AppContainer.vue


<template>
    <div class="full">
        <h1> Container </h1>
        <Navigation> </Navigation>
    </div>
</template>

<script>
    import Navigation from '@/components/Navigation'
    
    export default {
        name: 'full',
        components: {
            Navigation,
          
        },
        data () {
            return {
            nav: Navigation.items
            }
        },
        computed: {
            name () {
            return this.$route.name
            },
            list () {
            return this.$route.matched
            }
        }
}
</script>
</script>

component/Navigation.vue


<style>

</style>

<template>
  <div id="app-layout">
      <router-link to="/about"> About </router-link>
      <router-link to="/contact"> Contact </router-link>
       
  </div>
</template>

<script>
export default {
  name: 'Navigation',
  data () {
    return {
      nav: 'This is nav'
    }
  }
}
</script>

А в Контакте и О компоненте, имеющем простое соперничество. Но при попытке роутинга id не работает.

Пожалуйста, ведите меня, если я делаю это неправильно.

Заранее спасибо.

1 Ответ

0 голосов
/ 07 марта 2019

Если ваши маршруты About и Contact являются дочерними элементами AppContainer, вам необходимо поместить <router-view></router-view> в свои AppContainer

Мне нравится этот AppContainer.vue 

<template>
    <div class="full">
        <h1> Container </h1>
        <Navigation> </Navigation>

        <router-view></router-view>

   </div>
</template>

<script>
    import Navigation from '@/components/Navigation'

    export default {
        name: 'full',
        components: {
            Navigation,

        },
        data () {
            return {
            nav: Navigation.items
            }
        },
        computed: {
            name () {
            return this.$route.name
            },
            list () {
            return this.$route.matched
            }
        }
}
</script>
...