How can I have single Vue component and how each contents in that can be routed by buttons of other component

问题

I am new to Vuejs, I am looking to make my code effective just by having one vue component, and i want to specify the routing only once.

Currently i have one info.vue in a apps directive and prises.vue & priseshigh.vue in more directive. I want to have just one component in more directive. But the problem is in info.vue i have used two buttons, each button routes to prises.vue & priseshigh.vue respectively. Just like below code:

<vs-button class="btn"  @click="$router.push({name: 'prises'}).catch(err => {})" >Go To</vs-button>
<vs-button class="btn"  @click="$router.push({name: 'priseshigh'}).catch(err => {})" >Go There</vs-button>

My first question: So now i want to know, if i make one component as prisescomplete.vue by combining prises.vue & priseshigh.vue, how do i specify the routing to the buttons respectively in info.vue And what should i use in the prisescomplete.vue component to route the prises.vue & priseshigh.vue contents respectively .

My second question: below is my routing.js, so now what changes should i make in routing if i just have one component in views directive, and also with respect to first question.

       {
          path: '/apps/info',
          name: 'info',
          component: () => import('./views/apps/info/Info.vue'),
          meta: {
            rule: 'editor',
            no_scroll: true
          }
        },
        {
          path: '/apps/info/info-more/prises-card',
          name: 'prises',
          component: () => import('./views/apps/info/more/prises.vue'),
          meta: {
            pageTitle: 'info-more',
            rule: 'editor',
            no_scroll: true
          }
        },
        {
          path: '/apps/info/info-more/priseshigh-card',
          name: 'priseshigh',
          component: () => import('./views/apps/info/more/priseshigh.vue'),
          meta: {
            pageTitle: 'info-more',
            rule: 'editor',
            no_scroll: true
          }
        },

Please send me the modified code, so that i can understand it easily.

回答1:

You could pass props to route components.

https://router.vuejs.org/guide/essentials/passing-props.html

{
    path: '/apps/info/info-more/prises-card',
    name: 'prises',
    component: () => import('./views/apps/info/more/prisescomplete.vue'),
    props: {
        prisesType: "prises"
    },
     meta: {
            rule: 'editor'
          }
 },
 {
    path: '/apps/info/info-more/priseshigh-card',
    name: 'priseshigh',
    component: () => import('./views/apps/info/more/prisescomplete.vue'),
    props: {
        prisesType: "priseshigh"
    },
     meta: {
            rule: 'editor'
          }
    }

PrisesComplete.vue

<template>
  <div>
    <span v-if="prisesType === 'prises'"> Prises </span>
    <span v-else-if="prisesType === 'priseshigh'"> Prises High </span>
  </div>
</template>

<script>
export default {
  name: "PrisesComplete",
  props: {
    prisesType: {
      type: String,
      required: true
    }
  }
}
</script>

Also, you could use to="/path"

https://router.vuejs.org/guide/essentials/named-routes.html

<vs-button class="btn" :to="{ name: 'prises' }"> Go To </vs-button>
<vs-button class="btn" :to="{ name: 'priseshigh' }"> Go There </vs-button>

回答2:

First of all you need to write a navigation.vue component for the navigation and render inside app with routerview. Look the codesandbox and the describtion

TheNavigation.vue

<template>
  <div>
    <vs-button
      class="btn"
      @click="$router.push({ name: 'prises' }).catch((err) => {})"
      >Prises</vs-button
    >
    <vs-button
      class="btn"
      @click="$router.push({ name: 'priseshigh' }).catch((err) => {})"
      >Priseshigh</vs-button
    >
  </div>
</template>

then render the navigation bar with the router view for loading the router.Here is the App.vue where you render the navigation and routerview.

<template>
  <div id="app">
    <TheNavigation/>
    <hr>
    <RouterView/>
  </div>
</template>

<script>
import TheNavigation from "./components/TheNavigation";

export default {
  name: "App",
  components: {
    TheNavigation
  }
};
</script>

RouterView is reponsible for loading the components which are defined inside router.js Here is the Router.js

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);

const router = new Router({
  mode: "history",
  routes: [
    {
      path: "/prises-card",
      name: "prises",
      component: () => import("./components/Prises.vue"),
      meta: {
        pageTitle: "info-more",
        rule: "editor",
        no_scroll: true
      }
    },
    {
      path: "/priseshigh-card",
      name: "priseshigh",
      component: () => import("./components/PrisesHigh.vue"),
      meta: {
        pageTitle: "info-more",
        rule: "editor",
        no_scroll: true
      }
    }
  ]
});

export default router;

来源：https://stackoverflow.com/questions/65502413/how-can-i-have-single-vue-component-and-how-each-contents-in-that-can-be-routed