标签: vue-router

我正在尝试使用 Vue Router，但我闻到了一股难闻的气味。需要与社区核实，看看我是否做对了。

在 Vue Router 之前，我有一个组件作为父组件从其子组件接收事件并更新我的主应用程序数据属性：

<number-pad v-on:button-click="updateTotal($event)"></number-pad>

不要担心细节，但它正在起作用。

当我将它移动到 Vue Router 时，它现在看起来像这样......

const pageOne = {
    name: "page-one",
    template: `
    <div>
        <number-pad v-on:button-click="updateTotal($event)"></number-pad>
    </div>  `
};

...在我的 HTML 中包含以下内容：

<router-view></router-view>

还有很多我遗漏了，但你明白了要点。

无论如何，这将呈现得很好并更新组件的内部，当然，但指令不会再与主数据属性通信，除非我调整一些代码以将数据向上发送到<router-view>组件的更高级别：

<router-view v-on:button-click="updateTotal($event)"></router-view>

它现在可以工作了（为了简洁起见，我没有写出其他代码调整）。

换句话说，当谈到组件关系时，我从 Vue Router 之前的父 -> 子关系到之后的祖父 -> 父 -> 子关系。

<router-view>为了与主数据属性通信，我是否真的必须将所有绑定和指令复制到这个新祖父母？

这对我来说闻起来很糟糕，也是一个巨大的痛苦。

我能做些什么来改善这种情况？答案是：Vuex！或者是答案：不，你是笨蛋，你忽略了一些简单的事情。

谢谢。

ag-grid 网站上的 ag-grid-vue 文档清楚地说明：

您可以在 Grid 中提供 Vue Router 链接，但您需要确保为正在创建的 Grid 组件提供一个 Router。

带有示例代码：

// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();

// pass a valid Router object to the Vue grid components to be used within the grid
components: {
    'ag-grid-vue': AgGridVue,
    'link-component': {
        router,
        template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
    }
},

// You can now use Vue Router links within you Vue Components within the …

我有一个带有以下路由器的 Vue.js 项目：

import Vue from 'vue';
import Router from 'vue-router';
import Overview from '@/components/Overview';
import Experiment from '@/components/ForExperiment';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'test',
    },
    {
      path: '/overview',
      component: Overview,
    },
    {
      path: '/overview/from/:from/to/:to',
      name: 'overview',
      component: Overview,
    },
    //... some other urls goes here.
    {
      path: '/test',
      name: 'test',
      component: Experiment,
    },
  ],
});

如果我http://localhost:8080在浏览器中打开，我将被重定向到http://localhost:8080/#/test. 为什么不只是http://localhost:8080/test？“#”符号从何而来？

为什么如果我打开http://localhost:8080/test我被重定向到http://localhost:8080/test#/test？

更奇怪的是，如果我打开，http://localhost:8080/overview我会被重定向到http://localhost:8080/overview#/test，因此不会显示概览组件。 …

我正在尝试从我的 API 加载 Vue 应用程序中的路由。我尝试将数据推送到路由变量并使用 addRoutes 方法。但没有运气。我认为异步可能存在问题。但是为什么 addRoutes() 不起作用？

这是我的代码：

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

/**
 * Routes
*/
import item_index from '../../app/Tenant/Item/Views/Index.vue';
import contact_index from '../../app/Tenant/Contact/Views/Index.vue';
import eav_index from '../../app/Tenant/Eav/Views/create.vue';
import eav_create from '../../app/Tenant/Eav/Views/create.vue';

var routes = [
     { path: '/items', component: item_index, name: 'item_index' },
     { path: '/contact', component: eav_index , name: 'contact_index' , props: { entity_type_id: 1 }},
 ];


Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes …

您好，我正在使用 VueJS 和 webpack 模板。我有一堆可以用 Vue Router 轻松显示的组件。但是，我的组织使用 Robot Framework 进行测试，我们使用以下命令生成一个 HTML 页面：

python -m robot.testdoc /tests/directory /destination.html

这基本上是我使用路由器的方式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main.vue'
import Component1 from '@/components/Component1.vue'
import Component2 from '@/components/Component2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      mode: history,
      name: 'Main',
      component: Main
    },
    {
      path: '/component1',
      mode: history,
      name: 'Component1',
      component: Component1
    },
    {
      path: '/component2',
      mode: history,
      name: 'Component2',
      component: Component2
    }
  ]
})

有没有办法使用 Vue …

我将 Element UINavMenu与:router="true". 当我单击菜单链接（路由更改和活动菜单项更改）时，它工作正常。我遇到的问题是，当我单击浏览器导航按钮（back和forward）时，路由和组件会更改，但NavMenu活动选项卡不会更改。

NavMenu在使用浏览器导航按钮时，是否有一种简单的方法可以确保当前路线与彼此保持同步？我正在vue-router与mode: 'history'. 我原以为这会自动处理。

我有一个用 vue-router 创建的路由。

{
    path: '/events/:id',
    component: Event,
    name: 'Event',
    meta: {
        title: 'Design Web'
    }
},

在“meta”中，我给它命名了我的页面。

我可以通过这样做来调用我的页面的标题： $route.meta.title

但是现在，我面临一个问题。在我的页面标题中，我想传递一个变量（我的事件的名称）。

meta: {
  title: $nameOfEvent
}

怎么做 ？

谢谢

我正在一个项目中工作，该项目有不同的用户使用他们的徽标。基于 API 调用，我想加载具有不同调色板的不同 CSS。

现在我有一个css文件夹里面assets的文件夹与main.js（我的自定义字体风格等）和其他文件中有自定义调色板：<color-name>-palette.css。

在我中，nuxt.config我这样称呼 CSS 颜色：

  css: [
    '~/assets/style/app.styl',
    '~/assets/css/main.css',
    '~/assets/css/orange-palette.css'
  ],

有什么方法可以根据 URL 路径/API 调用绑定 CSS 文件而不是将路径放在那里？

我不确定我是否也可以在模板上使用它，将 CSS 文件绑定在那里。是否可以？

谢谢

我试图在 asyncData 方法中获取路由参数，如果我手动转到路由，它会起作用，但是如果我使用路由器 Push 方法，它不会得到任何参数。

这是我的 asynData 方法：

  async asyncData(ctx) {
    const { id } = ctx.app.router.currentRoute.params
    await ctx.store.dispatch('user/GET_USER', id)
    return {
      user: ctx.store.state.user.user
    }
  },

这就是我导航到相应页面的方式：

goToEdit(id) {
  this.$router.push({ path: `/users/${id}/edit` })
}

我有以下代码（IN VUE.JS）：

<template>
    <router-link
        id="router-link"
     >
    </router-link>
</template>

<script>
    ?
</script>

<style scoped>
    #router-link{
        border: 2px solid black;
        width: 100px;
    }
</style>

问题：
即使我将宽度设置为 100px，router-link也不会改变它的宽度大小。

有人可以帮助我理解为什么这不起作用以及是否有可能的解决方案？