используя vue -router для перенаправления на разные страницы - PullRequest
Новая
       7

используя vue -router для перенаправления на разные страницы

0 голосов
/ 24 января 2020

У меня есть приложение vue, которое дозирует простые вставки, и я пытаюсь использовать маршрутизатор vue для перенаправления на разные страницы, например, когда я загружаю / postComponent и / userComponent, они будут на отдельных страницах, а не на одной странице. при загрузке localhost: 8080

приложение. 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>

маршруты. 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')

postComponent 

<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

1 Ответ

2 голосов
/ 24 января 2020

ОБНОВЛЕНИЕ **: Приложение. vue: 

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

Внутренние маршруты. 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
  },
];

PostComponent: 

<template>
  Post Comp
</template>

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

Пользовательский комп: 

<template>
  User Comp
</template>

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

ОБНОВЛЕНИЕ *: удалите ненужные импорты из файла приложения

Я думаю, лучше сначала взглянуть на Vue -раут на https://router.vuejs.org/

SPA означает одностраничное приложение, что означает, что все ваши компоненты в конечном итоге будут выполняться в одном *. html файле. это означает, что в SPA вы не можете просто перенаправить клиента на другой URL-адрес и выполнить другой HTTP-запрос, оставаясь при этом на том же Vue SPA !. потому что тогда вы, вероятно, получите новые html / css и javascript файлы для выполнения и рендеринга. Все, что вы можете сделать, это 1.use vue router, чтобы указать, по какому пути, какой компонент должен отображаться. когда вы описываете свой маршрутизатор с помощью VueRouter, это именно то, что вы собираетесь делать !, настраиваете свой маршрутизатор и сообщает ему, по какому пути, какой компонент вы должны визуализировать.

нет способа, которым вы можете перенаправить клиента другой домен и все еще находиться в том же SPA и загружает ваши компоненты, НО! как я вижу в ваших кодах есть способ достичь того, что вы хотите. в вашем коде есть некоторые проблемы, но я покажу вам, как вы можете настроить два маршрута для достижения чего-то подобного. я предполагаю, что у вас есть эти два компонента postComponent и userComponent готовы. сначала мы должны импортировать их в наше routes.js: 

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

, отметив, что вы можете использовать '@' в качестве псевдонима для /src в вашем каталоге

сначала мы должны указать два маршрута, для /postcomponent и /usercomponent, мы делаем это, добавляя два объекта в массив routes в VueRouter, мы можем указать имя для наших маршрутов, и мы должны указать компонент, который будет отображаться на этом маршрутизаторе, 

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>

, и вы увидите, что когда вы go до http://localhost:8080/postcomponent, ваш postComponent будет отображаться на вашем <router-view/>!

...