Vue 路由器和 Bootstrap答案

【问题标题】：Vue router and BootstrapVue 路由器和 Bootstrap
【发布时间】：2016-09-08 19:55:54
【问题描述】：

我将 Vue 与 vue-router 和 vue-strap 一起使用。我正在尝试从vue-strap 注册组件，但示例如下所示：

var alert = require('vue-strap').alert;

new Vue({
  components: {
    alert: alert
  }
})

另一方面，vue-router 不会创建 Vue 对象。

Vue.use(VueRouter);

const router = new VueRouter({
  history: true,
  linkActiveClass : 'active'
});

router.map({
  '/': {
    component: Home
  }
});

const App = Vue.extend(Index);
router.start(App, '#root');

那么我该如何声明我的组件呢？

【问题讨论】：

你能附上你的Home组件代码吗？
也看看vuejs.org/guide/application.html
您创建了一个用于 router.start 的“根”组件。您将使用 extend 或 vue.component 注册的其他组件（全局）

标签： vue.js vue-router vue-strap

【解决方案1】：

这是我当前在 vue 应用中的设置

var Vue = require('vue');
var VueRouter = require('vue-router');


// Use
Vue.use(require('vue-resource'));
Vue.use(VueRouter);


// Components
var site = Vue.component('site', require('./views/site/component.vue'));
var home = Vue.component('home', require('./views/home/component.vue'));
var search = Vue.component('search', require('./views/search/component.vue'));
var index = Vue.component('index', require('./views/index/component.vue'));

// Router
var router = new VueRouter({
    history: true
});
router.map({
    '/': {
        component: index
    },
    '/search': {
        component: search
    },
    '/profile': {
        component: home
    }
})


// Start App
router.start(site, 'body');

所有“主要”组件都使用 .component 全局声明。我使用 .extend 声明的组件级别所需的一切。在 vue-router 中，“站点”组件（在我的例子中）充当 $root。

顶部菜单/侧边栏在组件部分的站点组件中声明。在“站点”模板中，我只有其他共享组件，例如顶部菜单/侧边栏。

【讨论】：

【解决方案2】：

你可以试试，

import { alert } from 'vue-strap'
Vue.use(VueRouter);

const router = new VueRouter({
  history: true,
  linkActiveClass : 'active'
});

router.map({
  '/': {
    component: alert
  }
});

const App = Vue.extend(Index);
router.start(App, '#root');

【讨论】：