Question

我正在使用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');

那我该如何申报我的组件？

Answer 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');

所有＆＃39;主要＆＃39;组件使用.component进行全局声明。我在组件级别需要的所有东西都用.extend声明。在vue-router中，＆＃39; site＆＃39; component（在我的例子中）充当$ root。

Topmenu /侧栏在组件部分的站点组件中声明。在＆＃39;网站＆＃39;模板我只有和topmenu / sidebar等其他共享组件。

Answer 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');

Vue路由器和Bootstrap

2 个答案: