标签: vue-router

试图从商店内推动路线变化。我尝试导入router到商店本身，然后按照以下方式做一些事情：

LOG_OUT({commit}){
  commit('LOG_OUT__MUTATION');

  router.push({
   name: 'Login' 
  })
}

......但这没有用。

我也不想直接从组件推送路由更改，因为这意味着我需要检查身份验证并在每个组件中推送路由更改，这对我来说似乎很麻烦。

编辑：

该LOG_OUT__MUTATION清除存储在状态令牌。

我已经安装了 vue-router（在 Laravel 项目中），然后尝试使用它：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

然后我得到了这个：

[Vue warn]: Error in beforeCreate hook: "TypeError: this._router.init is not a function"

有趣的是，之前一切都很好，但突然开始收到这条消息。

我想在控制器中获取当前路由名称。我试过：this.route, this.curentRoute, this._routerRoot 但没有任何作用。

computed: {
    currentRoute:{
      get(){
        console.log(this.__routerRoot);
      }
    },
}

如何获取路由器名称？谢谢

我正在为我的投资组合使用 vue 和 vue-router。我添加了简单的“淡入淡出”动画。而且我的动画很滞后。

我的 App.vue 组件：

<template>
    <div id="app">
        <Square/>
        <Navbar/>
    </div>
</template>

我的 Square.vue 组件：

<template>
    <div id="square">
        <transition name="fade">
            <router-view></router-view>
        </transition>
    </div>
</template>
<style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to{
      opacity: 0;
    }
 </style>

我的路线文件：

import Vue from 'vue';
import Router from 'vue-router';
import Hello from './views/Hello.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'hello',
      component: Hello,
    },
    {
      path: '/i-am',
      name: 'I am',
      component: () => import( 
'./views/About.vue'),
    }, …

所以我有一个组件，它在安装后执行代码，如下所示：

    mounted(){
        axios.get('/markers/' + this.username)
        .then(response => {
            this.markers = response.data.markers
        }).catch((error) => console.log(error));
    }

我得到这样的用户名：

username: this.$route.params.username

但是，如果我更改 URL 参数，用户名不会更新，因此我的 AXIOS 调用不会更新我的标记。为什么会这样？

我目前正在开发一个带有 Ruby on Rails 后端和 Vue.js 前端的应用程序。这是一个单页应用程序。我正在使用 webpacker gem 来构建我的主要 js 文件。

我添加了 vue-router 和几个前端路由。我能够使用<router-link>它正确呈现适当的组件进行导航。我无法弄清楚的是如何设置我的前端路由，以便有人可以直接导航到一个 url 而不会碰到我的 rails 路由。

例如，如果我输入/sample-route我想点击我的 Vue.js 路线而不是我的 rails 路线。我仍然希望能够对我的 rails 路由进行 api 调用。例如/api/users。

任何帮助表示赞赏。

我有一个带有身份验证系统和后端仪表板的应用程序。默认情况下，路由显示身份验证组件：

{
  path: "/",
  name: "Authentication",
  component: Auth
},

App.view 包含一旦登录我被重定向到另一个 vue 组件“home”：

{
  path: "/dashboard",
  name: "home",
  component: Home,
},

到现在为止还挺好。在这个主页组件中，我有一些带菜单的 HTML，我想在同一页面中显示组件。

这是主页模板中的 html 示例

<div>
  <router-link :to="'/dashboard/user'">User</router-link>
  <router-link :to="'/dashboard/stats'">Stats</router-link>

  <app-user></app-user>
  <app-stats></app-stats>
</div>

我还在路由器中为这些组件创建了路由，但在单击链接时它会显示一个白页。我刚开始使用 vue.js，我相信它很容易管理。我的目标是根据显示的页面显示组件。

我已经更改了我的应用程序以使其与 nuxt i18n 一起使用，并且当我直接访问路由时，翻译似乎有效。

例如 http://localhost:3000/fr/step/1

我的应用程序中有以下结构，每个步骤都是一个页面，里面有不同的组件。

我的nuxt配置：

在文档中，它说我需要localePath为我的 nuxt-link添加它以使其与 i18n 插件一起使用。 https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link

例如：

<nuxt-link to="localePath('about')">About</nuxt-link>

在我的应用程序中，我曾经以编程方式导航到下一步，例如：

this.$router.push({ path: `step/${this.currentStep + 1}` });

现在我有两个问题（问题）：

1. 我将如何以编程方式导航到路线localePath？例如this.localePath('step/2')不起作用。它总是重定向到首页。
2. 为什么它不能与模板中的普通链接一起使用？我已经测试过这个：
   <nuxt-link :to="localePath('step/2')">Foo</nuxt-link>但它也不起作用。当我尝试类似的事情时：
   <nuxt-link :to="localePath('success')">Foo</nuxt-link>它有效，因为success页面在第一级。

似乎路由或我处理子页面的方式有问题。谁能帮我这个？

我正在开发一个应用程序，该应用程序会阻止用户访问除主页和注册之外的任何页面，除非他们已登录。我有一个包罗万象的路由防护，可以在尝试访问页面时检查用户是否已登录并重定向到如果返回 false 则登录。在登录组件中，用户登录后，他们将被定向到主页。我想要设置的是，当用户登录时，如果他们之前访问过某个页面或直接输入了页面的 url，则重定向到应用程序的最后一个页面，如果没有重定向到主页。例如：

用户导航到 my.app/{somePage} -> 路由防护检查登录返回 false -> 重定向到 my.app/sigin -> 用户成功登录 -> 重定向到 my.app/{somePage}

//Route Guard
router.beforeEach((to, from, next) => {
    if(!signedIn()){
        router.replace('/signin')
    }
    else{
        next()
    }
})


//Successful signin
signInSuccess(){
    //Want this to redirect to intended page if exists
    this.$router.replace('/')
}

我尝试过使用 this.$router.go(-1) 进行重定向，但是当我重定向到路由防护中的登录页面时，预期的路由似乎没有被推入历史记录中。

我还尝试在 vuex 商店中设置状态以捕获预期路线并在登录后使用它进行重定向，但路线防护似乎会重新加载整个页面，因此商店状态会重置。

我唯一能想到的另一件事是将预期的页面路由存储在浏览器本地存储中，但这似乎不是一个可靠的解决方案。

当打开一个新的 Vue.js 页面时，会出现一个白色页面，直到整个应用程序加载完毕。我试过很多次用传统的方式把loading语句放在最前面，但是问题是连loading语句都需要一段时间才能加载出现，替换白页。

<div id="app">
    <template>
  <div id="app">
    <v-app>
      <navbar></navbar>

      <v-content class="mx-sm-12 mt-8 mx-1">
        <router-view />
      </v-content>
    </v-app>
  </div>
</template>

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

export default {
  components: {
    navbar
  }
}
</script>