如何将我的Bootstrap模板集成到vue.js

Question

我是Vue js的新手。我想将现有的Bootstrap模板集成到vue js。

我已经通过Webpack在CLI中安装了Vue js 2。

在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>

并且在Contact and About组件中具有简单的外观。但是当尝试破坏ID无效时。

如果我做错了方法，请指导我。

谢谢。

Answer 1

如果您的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>