Vue.js 使用vue路由器重定向到不同页面_Vue.js_Vue Router

Vue.js 使用vue路由器重定向到不同页面

vue.js

Vue.js 使用vue路由器重定向到不同页面,vue.js,vue-router,Vue.js,Vue Router,我有一个vue应用程序，可以进行简单的插入，我正在尝试使用vue路由器重定向到不同的页面，例如，当我加载/postComponent和/userComponent时，它们将位于单独的页面上，而不是加载localhost:8080时位于一个页面中 app.js <template> <div id="app"> <router-link to="/postcomponent">post</router-link> <rou

我有一个vue应用程序，可以进行简单的插入，我正在尝试使用vue路由器重定向到不同的页面，例如，当我加载/postComponent和/userComponent时，它们将位于单独的页面上，而不是加载localhost: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>

后成分

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

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




    }
  },

我得到以下错误更新**： App.vue：

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

后置组件：

<template>
  Post Comp
</template>

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

请注意，您可以使用

'@'

作为目录中

/src

的别名

首先，我们必须为

/postcomponent

和

/usercomponent

指定两条路由，我们通过在VueRouter中的

routes

数组中添加两个对象来实现，我们可以为路由指定一个名称，并且必须指定一个将在该路由器上呈现的组件

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

所以现在我们必须实现我们的应用程序文件，说明我们希望这些组件呈现的地方，我们使用空的

标记来显示

现在一切都设置好了，您可以使用如下标签在路由之间切换：

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

Show me post组件：）

当您转到

http://localhost:8080/postcomponent

您的postComponent将呈现并放置在您的

上

更新**： App.vue：

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