使用 vue-router 重定向到不同的页面

Question

我有一个 vue 应用程序，它提供简单的插入，我正在尝试使用 vue 路由器重定向到不同的页面，例如，当我加载 /postComponent 和 /userComponent 时，它们将在单独的页面上，而不是在加载本地主机时全部在一个页面中:8080

app.js

<template>
  <div id="app">

    <router-link to="/postcomponent">post</router-link>
    <router-link to="/usercomponent">user</router-link>
    <router-view/>



  </div>
</template>

<script>

import PostComponent from './components/postComponent';
import userComponent from './components/userComponent';


export default {
  name: 'app',
  components: {
   PostComponent,
    userComponent
  }
};
</script>

routes.js

import Vue from 'vue'
import App from '/client/src/App'
import VueRouter from 'vue-router'
import postComponent from '/client/src/components/postComponent';
import userComponent from '/client/src/components/userComponent';


vue.use(VueRouter);

Vue.config.productionTip = false

const routes = [
    {
        path: '/postcomponent',
        name: 'postcomp',
        component: postComponent
    },
    {
        path: '/usercomponent',
        name: 'usercomp',
        component: userComponent
    },
];

new Vue({
    routes,
    render: h => h(App),
}).$mount('#app')

后组件

<script>
import postService from '../postService';

export default {
  name: 'postComponent',
  data() {
    return {
      posts: [],
      error: '',
      topic: '',
      price: '',
      location: '',
      provider: ''




    }
  },

index.js

const  express  = require ('express');
const  bodyparser  = require ('body-parser');
const  cors  = require ('cors');

const  app = express();

app.use(bodyparser.json());
app.use(cors());
const posts = require('./api/posts');
const users = require('./api/users');

app.use('/api/posts', posts);
app.use('/api/users', users);

const  port = process.env.port || 500;


app.listen(port, () => console.log(`Server started on port ${port}`));

我收到以下错误 https://i.stack.imgur.com/42Ka3.png

Answer 1

更新**： 应用程序.vue：

    <template>
      <div id="app">
         <router-link to="/postcomponent">post</router-link>
         <router-link to="/usercomponent">user</router-link>
         <router-view/>
      </div>
    </template>

在 Routes.js 内部导入语句和路径：

import PostComponent from "@/components/PostComponent";
import UserComponent from "@/components/UserComponent";

const routes = [
  {
    path: '/postcomponent',
    name: 'postcomp',
    component: PostComponent
  },
  {
    path: '/usercomponent',
    name: 'usercomp',
    component: UserComponent
  },
];

后组件：

<template>
  Post Comp
</template>

<script>
   export default {
      name: "PostComponent"
   }
 </script>

用户比较：

<template>
  User Comp
</template>

<script>
   export default {
      name: "PostComponent"
   }
 </script>

更新 * ： 删除应用文件中那些不必要的导入

我认为最好先看看 Vue-router https://router.vuejs.org/

SPA 代表单页应用程序，这意味着您的所有组件最终都将在单个 *.html 文件上执行。这意味着在 SPA 中，您不能只是将客户端重定向到另一个 url 并执行另一个 HTTP 请求，并且仍然在同一个 Vue SPA 上！因为那样你可能会得到新的 html/css 和 javascript 文件来执行和渲染。你所能做的就是 1.使用 vue 路由器指定应该在哪个路径上渲染哪个组件。当你使用 VueRouter 描述你的路由器时，这正是你要做的！配置你的路由器并告诉他在哪条路径上，你应该渲染什么组件。

您无法将您的客户端重定向到另一个域并且仍然在同一个 SPA 上并加载您的组件但是！ 正如我在您的代码中看到的那样，有一种方法可以实现您想要的。您的代码中存在一些问题，但我将向您展示如何配置两条路线来实现类似的目标。 我假设您已准备好这两个组件 postComponent 和 userComponent。 首先我们必须在我们的routes.js 中导入它们：

import postComponent from 'PATH_TO_COMP';
import userComponent from 'PATH_TO_COMP';

请注意，您可以在目录中使用'@' 作为/src 的别名

首先我们必须为/postcomponent和/usercomponent指定两条路由， 我们通过将两个对象添加到 VueRouter 中的 routes 数组来实现，我们可以为我们的路由指定一个名称，并且我们必须指定一个将在该路由器上呈现的组件，

routes : [
 {path : "/postcomponent", name :"postComp", component:postComponent},
 {path : "/usercomponent", name :"userComp", component:userComponent}
]

所以现在我们必须实现我们的应用文件来说明我们希望这些组件在哪里呈现，我们使用空的<router-view/> 标签来显示，

现在一切都设置好了，你可以使用<router-link>标签在路由之间切换，如下所示：

<router-link to="/postcomponent" >Show me post component :)</router-link>

您会看到，当您转到 http://localhost:8080/postcomponent 时，您的 postComponent 将呈现并位于您的 <router-view/> 上！