主页 / 问题

问题[nuxt.js]

Martin Hope
Alexander Lopatin
Asked: 2020-10-26 18:51:19 +0800 CST
  • 0

你好！

在 Nuxt.js 中，我们需要创建一个按钮，并根据当前 URL 给它一个 URL。我不明白如何从 $route 获取完整路径并使用它来构建按钮的 URL。

那些。有一个 $route，通过 Vue DevTools 看到：

$route {
    "path":"/admin/companies/25",
    "query":{},
    "params":{"id":"25"},
    "fullPath":"/admin/companies/25",
    "name":"admin-companies-id",
    "meta":{}
}

这个页面模板包含一行带有一个按钮（Bootstrap-Vue）：

<b-btn class="ml-1" variant="dark" to="URL">Создать</b-btn>

而不是按钮中的 to="URL" ，您需要获取

to="/admin/companies/25/reports/create"

我不明白如何引用 $route.fullPath 以便将其值分配给 to 属性

nuxt.js
Martin Hope
dpi
Asked: 2020-08-30 04:54:04 +0800 CST
  • 0

一切都很好，很多钱和幸福。有经验的请告知。

一般来说，问题是在安装组件时如何启动动作，是否可以将负载（变量）传递给动作？

export const state = () => ({
  Country: {
    item: {},
    items: []
  },
  City: {
    item: {},
    items: []
  },
  Basic: {}
});

export const mutations = {
  Country(currentState, payload) {
    currentState.Country = JSON.parse(JSON.stringify(payload));
  },
  City(currentState, payload) {
    currentState.City = JSON.parse(JSON.stringify(payload));
  },
  Basic(currentState, payload) {
    currentState.Basic = JSON.parse(JSON.stringify(payload));
  }
};

export const actions = {
  Country({ commit }, payload) {
    commit("Country", payload);
  },
  City({ commit }, payload) {
    commit("City", payload);
  },
  async Basic({ commit }) {
    try {
      const { data } = await this.$axios.get(url).then(response => {
        return response;
      });
      console.log(data);
      await commit("Basic", data);
    } catch (error) {
      console.error(error);
      throw error;
    }
  }
};

export const getters = {
  getCountry: currentState => currentState.Country,
  getCity: currentState => currentState.City,
  getBasic: currentState => currentState.Basic
};

怎么跑到这里

async Basic({ commit }) {
try {
  const { data } = await this.$axios.get(url).then(response => {
    return response;
  });
  console.log(data);
  await commit("Basic", data);
  } catch (error) {
  console.error(error);
  throw error;
   }
 }


export default {
  name: "SettingsBasic",
  data() {
    return {}
  },
  computed: {
    ...mapGetters("settings", ["getCountry","getCity","getBasic"]),
  },
  beforeMount() {
    this.getBasic()
  },
  methods: {

  }
};

nuxt.js
Martin Hope
Valdemar
Asked: 2020-07-01 13:20:27 +0800 CST
  • 0

在此代码片段中，我使用事件侦听器。构建时，会产生错误“未定义窗口”。你能告诉我如何解决这个问题吗？NUXTJS！

methods: {
    onResize() {
      this.onMobileCondition = window.innerWidth <= 600;
    }
  },
  
  created() {
    window.addEventListener("resize", this.onResize);
    this.onResize();
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
  }

更新：与滑块相同的错误。如何绕过？在此处输入图像描述

nuxt.js
Martin Hope
Timur Musharapov
Asked: 2020-04-11 21:28:51 +0800 CST
  • 1

我有一个项目，我是使用 akella 的教程完成的：https ://github.com/merrymaker14/vuegl 我决定将它上传到 GitHub Pages。 https://merrymaker14.github.io/vuegl

但他通常不会浏览页面，尽管他似乎已经设置了所有内容。为什么？

nuxt.config.js：

import pkg from './package'

/* nuxt.config.js */
// only add `router.base = '/<repository-name>/'` if `DEPLOY_ENV` is `GH_PAGES`
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/vuegl/'
  }
} : {}

export default {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  ...routerBase,

  router: {
     middleware: 'pages',
     //base: '/examples/vuegl/'
  },

  /*
  ** Global CSS
  */
  css: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}
nuxt.js