vue.js - 如何将 Vue 路由器与 Vue 集成

Question

我找到了一个关于如何使用 Vue 路由器的很好的例子。这是 app.js 文件:

// Telling Vue to use the router
Vue.use(VueRouter)

// Initializing the router with options
var router = new VueRouter({
    history: false
});

// Redirect certain routes to other routes
router.redirect({
    '/': '/users/list'
})

// Define your routes here.  
// NOTE: You'd normally do something
// like require('./home/index.vue') for the component
router.map({
    // Not found handler
    '*': {
        component: {
            template:
            '<div>' +
            '<h1>Not Found</h1>' +
            '</div>'
        }
    },
    '/users': {
        component: {
            template:
            '<div>' + // Wrap your views in one root html node so that the transitions work
            '<h1>Users</h1>' +
            '<ul class="nav nav-tabs">' +
            '<li><a v-link="/users/list">List</a></li>' +
            '<li><a v-link="/users/create">Create</a></li>' +
            '</ul>' +
            '<br>' +
                // <router-view></router-view> is where the nested sub route views will appear.
                // If you want the transitions to happen here you can copy the attributes on the router-view in codepen's HTML view and paste it here.
            '<router-view></router-view>' +
            '</div>'
        },
        subRoutes: {
            '/list': {
                component: {
                    template:
                    '<div>' +
                    '<ul><li><a v-link="/users/1/profile">Rick James</a></li></ul>' +
                    '</div>'
                }
            },
            '/create': {
                component: {
                    template:
                    '<form>' +
                    '<div class="form-group">' +
                    '<input class="form-control" type="text">' +
                    '</div>' +
                    '<button class="btn btn-primary">Create</button>' +
                    '</form>'
                }
            },
            '/:id': {
                component: {
                    template:
                    '<div>' +
                    '<h1>User Settings</h1>' +
                    '<ul class="nav nav-tabs">' +
                    '<li><a v-link="/users/{{route.params.id}}/profile">Profile</a></li>' +
                    '<li><a v-link="/users/{{route.params.id}}/posts">Posts</a></li>' +
                    '</ul>' +
                    '<br>' +
                    '<router-view></router-view>' +
                    '</div>'
                },
                subRoutes: {
                    '/profile': {
                        component: {
                            template: '<div>Name: Rick James<br>Email: rick@james.com</div>'
                        }
                    },
                    '/posts': {
                        component: {
                            template: '<div><ul><li>Post Name 1</li><li>Post Name 2</li></ul></div>'
                        }
                    }
                }
            }
        }
    },
    '/different': {
        component: {
            template: '<div>' +
            '<h1>Different</h1><p>{{ test }}</p>' +
            '</div>',
            data: function() {
                return {
                    test: 'Hello I am a data variable from Vue.JS'
                }
            }
        }
    },
    '/about': {
        component: {
            template:
            '<div>' +
            '<h1>About</h1>' +
            '<p>' +
            'Well my father was a gambler down in Georgia,<br>' +
            'He wound up on the wrong end of a gun.<br>' +
            'And I was born in the back seat of a Greyhound bus<br>' +
            'Rollin\' down highway 41.<br><br>' +
            'Lord, I was born a ramblin\' man,<br>' +
            'Tryin\' to make a livin\' and doin\' the best I can.<br>' +
            'And when it\'s time for leavin\',<br>' +
            'I hope you\'ll understand,<br>' +
            'That I was born a ramblin\' man.' +
            '</p>' +
            '</div>'
        }
    }
});

// Declaring the app itself

var App = Vue.extend();

// Initializing the whole thing together
router.start(App, '#app')

但是我不知道把剩下的代码放在哪里。例如，您需要初始化 Vue，不是吗？你把你的方法放在哪里，你对 Vue 资源的调用等等。我试着添加这个:

var app = new Vue({
    el : '#app',
    methods: {
        alertTest : function() {
            alert('hello');
        }
    }
})

但是我不知道怎么整合。对于 alertTest，我在其中一个链接上有一个 v-on 事件。这是链接:

 <a class="list-group-item" v-link="/users/list" v-on="click: alertTest">Users</a> 

但是事件没有触发。我觉得我需要将第一段代码(来自 Michael J. Calkins 的教程)绑定(bind)到第二段代码中，这样事件才会触发。我怎么做？除了路由器之外，我不知道该将应用程序的其余部分放在哪里。

Answer 1

可能现在回答已经太晚了。我最近也学习了 Vue.js，也有同样的疑问。在整个 Vue.js 文档中，Vue 实例都是使用 new Vue() 创建的，当我开始学习 vue-router 时，这一切都改变了。

请注意，当我们将 Vue 与 Vue-router 一起使用时，我们必须考虑一些 API 更改。

简单的工作流程是:

• 像下面这样创建所有组件:

  var home=Vue.extend({template:"<div align='center'>Homepage</div>"});
var about=Vue.extend({template:"<div align='center'>About</div>"});
var contact=Vue.extend({template:"<div align='center'>Contact</div>"});

• 创建您的应用程序:[注意此处的 api 更改。我们不再使用 new Vue()] var App = Vue.extend({});
• 创建并注册您的路由器，例如: var router = new VueRouter();
• 注册您的路线: router.map({
"/" : {component : home},
"/home" : {component : home},
"/about" : {component : about},
"/contact" : {component : contact}<br/>
})
• 初始化您的应用程序: router.start(App, '#app');请注意这一步。这里我们初始化并启动应用程序。而不是常规的 Vue api，我们需要像 new Vue(el:"#app) 那样注册在应用程序中声明的元素，看看 api 是如何改变的，现在我们用上面的语法向 vue 注册元素 (#app)。

还有一点要注意。其他 Vue 选项 [如数据、计算、就绪等] 仍然可以像下面这样提供:

var App = Vue.extend({
data : function(){
    return {
        message : "hello"
    }
}

});

Note-1 请记住从您的页面调用这些路由，如 <a v-link={path:'/home'} .

注意 2 请记住将所有 v 链接放在 html 中#app 的范围内，否则您的链接将无法点击。

对于像我这样刚接触 javascript 世界的人来说，只要坚持工作示例中提供的约定就可以了。