标签: vue-router

使用 vue-router，我有一个组件检查用户登录状态，如何使用路由器重定向到登录页面 URL？

在组件中，我的代码：

<script>
  export default {
    components: {
    },
   
    name: 'landing-page',
    created: function () {
      const router = this.$router
      router.go({path: '/login'})
    }
  }
</script>

但router.go不起作用。

我在使用 vue-cli v3.0 部署 Vue 应用程序构建时遇到了一些麻烦。到 GitHub 页面。我使用子树dist将文件夹仅发送到gh-pages分支。首先，问题是找不到资产，但我使用baseUrlon修复了它vue.config.js。现在的问题是该#app元素为空。我发现如果我不使用vue-router（直接渲染视图而不是使用<router-view/>），该应用程序可以在 GitHub 页面上正常工作。我相信路线选项存在一些问题path，但我无法弄清楚如何解决它。

有问题的存储库是https://github.com/guizoxxv/vue-cli-deploy，GitHub 页面链接是https://guizoxxv.github.io/vue-cli-deploy/

谢谢。

大家好，我有以下路线，我尝试调用应使用嵌套路线同时加载的不同组件，我有一个导航栏（称为 NavBar）与我的主窗体（称为 MainForm）一起加载。不知怎的，MainForm 没有被调用，只有 NavBar 被调用。我还有一个没有导航栏的表单，因此是下一个路线条目。路由器包含以下代码：

import MainForm from '@/components/MainForm';
import NavBar from '@/components/NavBar';
Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '',
      name: 'NavBar',
      component: NavBar,
      children: [
        {
          path: '/form/:id',
          component: MainForm
        }
      ]
    },
    {
      path: '/formNoNavBar/:id',
      component: MainForm
    }
   ]
});

在第一个条目中，当我访问http://localhost:8080/#/form/sampleid时，应用程序会加载导航栏，但不会加载 MainForm。在第二个条目中，加载 MainForm 没有问题。进一步让我怀疑的是我将其添加到我的 MainForm.vue 中：

export default {
  name: 'MainForm',
  created: function () {
    console.log('heya');
  } ....

在第二个路由条目上，“heya”显示在控制台上，但在第一个路由条目上却没有。如何修复我创建的嵌套路由以加载导航栏和 MainForm vue 文件？

如何从我的脚本代码重定向到另一个 vue 页面。我正在使用 router.push() 但无法重定向到我想要的 vue 页面。

以下是我的源代码。

src/路由器/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HomePage from '@/components/HomePage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'IndexPage',
      component: IndexPage
    },
    {
      path: '/homepage',
      name: 'HomePage',
      component: HomePage
    }
  ]
})

src/components/IndexPage.vue

<script>
  import VueRouter from 'vue-router'

  export default {
    name: 'IndexPage',
    methods: {
      redirectUser() { // this method is called on button click
         if (1 == 1)
         {
            router.push('/homepage');
            //this.$router.push('/homepage');
         }
      }
    }
  } …

我有一个相当大的 VueJS SPA，我只想使用延迟加载在某些路由上加载 vuex 模块。

我正在关注这篇文章来重现此内容 - https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/

然而，这给了我一个 vuex 错误。

文件夹结构

root
  |- store
  | |- modules
  | | |- auth.js
  | | |- module2.js
  | |- store.js
  |- app.js

auth.js

const state = {
    var1: {},
    var2: false
}

const mutations = {
    'MUTATION_1'(state, obj) {
        // logic
    }
}

const actions = {
    action1({commit}) {
       // logic
    }
}

const getters = {
    var1: state => state.var1,
    var2: state => state.var2
}

export default {
    state,
    mutations, …

当您按下后退按钮时，Vuejs 看起来会自动滚动到页面顶部，这很奇怪，因为默认情况下，当您在 SPA 中更改路由或转到新页面时，窗口甚至不会滚动到顶部。您需要显式设置scrollBehaviour以滚动到顶部。那么如何才能防止按下后退按钮时页面自动滚动到顶部呢？

beforeRouteLeave (to, from, next) {
    alert('Are you sure you want to leave this page and lose unsaved changes')
    // Notice how the page automatically scrolls to the top here even if the user were to response 'No' in a dialog situation
}

这是问题的代码笔 https://codepen.io/anon/pen/bOGqVP

假设我有这些路线：

/admin/login
/admin
/admin/dashboard

的目的/admin是根据用户的身份验证状态将用户重定向到/admin/login或。/admin/dashboard所以它没有模板/组件。实现这一目标的正确方法是什么？

我应该创建 Admin.vue 组件仅用于重定向用户吗？或者还有其他方法可以做到这一点吗？

我在使用 vue-router 加载页面时遇到问题。看来我的$routervar 没有被访问。

当我控制台日志时，this.$router我收到一个未定义的消息。但是，控制台日志记录this会返回开发工具中的存储对象。

以下是相关脚本：

main.js

import Vue from "vue";
import VueCookies from 'vue-cookies';
import App from "./App.vue";
import router from "./router";
import { store } from "./store/store";
import BootstrapVue from "bootstrap-vue";
import "./registerServiceWorker";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import "../css/bracket.min.css";

Vue.use(BootstrapVue);
Vue.use(VueCookies);

// set default config
VueCookies.config('1d');

// set global cookie
VueCookies.set('theme','default');
VueCookies.set('hover-time','1s');

require("../css/bracket.min.css");

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

路由器.js

import Vue from "vue";
import Router …

我正在用 laravel、vue 和 vue router 构建一个电子商务项目

我想在历史模式下使用 vue 路由器，但它给我带来了麻烦。

这是我的代码

new Vue({
    el: '#app',
    router: new VueRouter({
        mode: 'history',
        routes
    })
});

这是我在 web.php 中的路由，它有语言环境中间件

Route::group(['prefix' => '{locale}', 'where' => ['locale' => '[a-zA-Z]{2}'], 'middleware' => 'setlocale'], function () {
    Route::view('/{path?}', ('layouts.app'))->where('path', '.*');
});

这是我使用 vue 路由器的路线

export const routes = [
    {
        path: '/',
        component: require('./components/Page/HomePage').default,
    },
    {
        path: '/product',
        component: require('./components/Page/Product/ProductPage').default,
    },
];

我需要我的网址

http://localhost/en

而不是（带有主题标签）

http://localhost/en#/

使用历史模式后，我成功删除了主题标签。但是，其他的路由器链接将在我的 url 中删除我的语言环境

http://localhost/product

我现在不知道该怎么办。请帮忙~谢谢。

2020 年 3 月 19 日更新

我想我尝试了几乎所有尝试从router-link.

这是我的代码：

<router-link :to="{name: 'Plan'}">
   <div>Plan Your Trip</div>
      <div class='expander'>
      <router-link :to="{name: 'Plan'}">COVID-19</router-link>
      <router-link :to="{name: 'Plan'}">Visa</router-link>
      <router-link :to="{name: 'Plan'}">Essentials</router-link>
   </div>
</router-link>

我正在尝试仅从子链接中删除下划线。

我尝试过的事情：

内嵌样式

<router-link style="text-decoration: none !important;" :to="{name: 'Plan'}">COVID-19</router-link>

分配班级

<router-link class="sub-link" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   .sub-link{text-decoration: none !important;}
</style>

声明标签

<router-link tag="div" :to="{name: 'Plan'}">COVID-19</router-link>

<style scoped>
   div{text-decoration: none !important;}
</style>

为该标签分配单独的标签+声明类

<router-link :to="{name: 'Plan'}">
   <div class="sub-link">COVID-19</div>
</router-link>