了解Vue组件和路由

Question

我正在学习how to build a website using a Vue frontend and Express REST backend。

我创建了以下新路线：

/path/to/vue-client/routes/index.js

String xml = restTemplate.getForObject(url, String.class, uriVariables);
JAXBContext jaxbContext = JAXBContext.newInstance();
Unmarshaller jaxbUnmarshaller = jaxbContext.createUnmarshaller();
StringSource xmlStr = new StringSource(xml);
Object o = jaxbUnmarshaller.unmarshal((Source) xmlStr);
if (o instanceof VonAZRAZRBestaetigungMeldung090098) {
    // ...
}

/path/to/vue-client/src/components/Register.vue

import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@components/HelloWorld';
import Register from '@components/Register';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'hello',
            component: Hello
        },
        {
            path: '/register',
            name: 'register',
            component: Register
        }        
    ]
});

现在，在进行了这些更改之后，我希望当我浏览到<template> <div> <h1>{{ msg }}</h1> <p> This is the registration page. </p> </div> </template> <script> export default { name: 'Register', props: { msg: String } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style> 时，会看到显示“注册”页面，但是，浏览器仅显示主页（无论我在浏览器网址栏中键入什么内容） ！）。

我要显示注册页面的唯一方法是直接修改App.vue：

/path/to/vue-client/src/App.vue

http://localhost:8080/register

如何获得指向另一个页面（实现为单个文件组件）的链接以在Vue中工作？

Answer 1

您需要在App.vue内添加

<router-view></router-view>

当匹配特定路径时将呈现您的组件（在您的情况下为Hello或Register）。

要在组件内部生成链接，然后在使用路径/组件之间进行导航

<router-link to="/">Go to Hello component</router-link>

cf VueJS路由器文档：