我如何拥有单个 Vue 组件以及其中的每个内容如何通过其他组件的按钮进行路由

Posted 2023-02-23

【中文标题】我如何拥有单个 Vue 组件以及其中的每个内容如何通过其他组件的按钮进行路由

【英文标题】：How can I have single Vue component and how each contents in that can be routed by buttons of other component

【发布时间】：2021-04-06 16:31:54

【问题描述】：

我是 Vuejs 新手，我希望仅通过一个 vue 组件来使我的代码有效，并且我只想指定一次路由。

目前我在应用程序指令中有一个 info.vue，在更多指令中有一个 prises.vue 和 priseshigh.vue。我想在更多指令中只包含一个组件。但问题出在 info.vue 中，我使用了两个按钮，每个按钮分别路由到 prises.vue 和 priseshigh.vue。就像下面的代码：

<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>

我的第一个问题：所以现在我想知道，如果我通过结合 prises.vue 和 priseshigh.vue 将一个组件制作为 prisescomplete.vue，我如何在 info.vue 中分别指定到按钮的路由以及应该我在 prisescomplete.vue 组件中使用分别路由 prises.vue 和 priseshigh.vue 内容。

我的第二个问题：下面是我的 routing.js，所以现在如果我在 views 指令中只有一个组件，我应该对路由进行哪些更改，以及关于第一个问题。

       
          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
          
        ,

请将修改后的代码发给我，以便我理解。

【参考方案1】：

你可以传递 props 来路由组件。

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>

另外，你可以使用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】：

首先，您需要编写一个navigation.vue 组件用于导航并使用routerview 在应用程序内部进行渲染。查看codesandbox 和描述

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>

然后用路由器视图渲染导航栏以加载路由器。这里是 App.vue 在其中呈现导航和路由器视图。

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

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

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

RouterView 负责加载在 router.js 中定义的组件 这是 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;

【讨论】：

非常感谢，但这不是我想要的。我的浏览器中显示了 Info.vue 组件。它包含两个按钮。所以当我点击第一个按钮时，它会导航到prises.vue，第二个按钮会导航到priseshigh.vue。现在我想将这个 prises.vue 和 priseshigh.vue 组合为一个组件，并将其命名为 prisescomplete.vue。现在我的按钮应该仍然可以浏览 prisescomplete 中的 prises & priseshigh 的内容。那么我应该在我的 routerlink 和我的按钮中进行哪些更改，以及如何在 prisescomplete 中指定内容。

如果我没记错的话.. 你需要为你的 prisescomple.vue 组件添加一个新的路由器。是吗？？

是的，以及如何从 prisescomplete.vue 路由特定内容。正如我之前所说，如果我单击 info.vue 中的按钮，它将分别进入 prises 和 priseshigh。但是prises和priseshigh的内容是完整的。所以我想知道我应该改变什么路由以及如何将特定内容从prisescomplete路由到按钮。

您好，tuhin47 我自己知道了，从您的回答中我了解了事情的工作原理以及路由在实际中是如何发生的。现在你能给我一些想法吗***.com/questions/65518724/…

你好@tuhin47，我有一个关于chartjs的问题，我想你可能有一些想法，这里是URL***.com/questions/65538183/…请帮帮我，因为到目前为止我已经理解了你所有的答案你给了我。