标签: vue-router

我正在尝试访问这样的 URL：

methods: {
    show (file) {
        this.$router.go('/file/' + file.path + '?token=' + localStorage.getItem('jwt-token'));
    }
}

我不是要转到组件。我只想转到以下网址：

'/file/' + file.path + '?token=' + localStorage.getItem('jwt-token')

但它不起作用。它将我重定向到主页。

我怎样才能做到这一点？

是否可以从登录页面隐藏vue-router？如果是这样,我该怎么做？我在每个页面上看到菜单,但在登录页面上我不想看到它.

这是我的代码:

登录

 <template>
 <div>
     <h1>Login</h1>
        <form action="">
            <label>naam</label>
            <input type="text">
        </form>
    </div>
</template>

<script>

</script>


<style scoped>
    h1 {
        background-color: chartreuse;
    }
</style>

App.vue

<template>
  <div id="app">
    <div class="routing">

    </div>
    <router-link to="/">Login</router-link>
    <router-link to="/home">Home</router-link>
    <router-view v-if="$route = 'login'"></router-view>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  }
}
</script>

Main.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import App from './App.vue'
    import Login from './Login.vue'
    import Home from './Home.vue'

    Vue.use(VueRouter);

    const routes = [ …

我在使用 vue-router 时遇到了一些麻烦。我的路线是这样设置的：

const routes = [
    { path: '/', component: a },
    { path: '/a', component: a },
    { path: '/b', component: b },
    { path: '/c', component: c }
]

如您所见，我想a在页面加载时加载组件。但我不希望 URL/a在页面加载时更改为。但是我想触发与组件相关的router-link-active-class ，即使我仍然在.<router-link>a/

我尝试过一些简单的 JS，例如：

if(window.location.hash === '#/') {
    var el = document.querySelector('#drawerList').firstElementChild;
    el.className += 'router-link-active';
}

但是，当我单击/b或的链接时，vue 不会再次删除该类/c。你们中的任何人都可以向我暗示正确的方向吗？

我已将导航添加到抽屉，除链接与页面相同的情况外，其他所有功能均正常。单击链接后，抽屉保持打开状态，对于访问者来说，该页面是当前页面并不明显。

我试图做这样的事情，@click.stop="(this.router.path != '/' ? this.router.push('/') : drawer = !drawer)"Vue不会产生任何错误，并且代码无法正常工作。

我哪里错了？

我正在使用现有的数据库,每个表列都包含空格.作为VueJS api的结果,我得到了带有空格的数据键,如下所示:

data = {
Course Trained:"82",
Course trained 2:null,
Delivery Channel:"IA2DC1",
End Date:"2017-05-06",
Full Name:"9",
ID:"1",
Intervention:"IA2",
Number of sessions:"5",
Start Date:"2017-05-02",
Training Orginisation:"2",
}

我的问题是当我尝试使用'v-model'=>'Course Trained'时,整个页面编译错误.

我怎样才能在VueJS中处理这个空间？

PS.我无法删除空格来更改表列名称.因为它与许多关系和第三方应用程序相关联.

我使用vuex-persistedstate。但是吸气剂不起作用。我在 Vue.js Devtools 中检查了状态，状态是存在的。但是 getter 没有数据。像这样。

Chrome 中的 Vue.js Devtools

那么如何使用 getter 呢？

Vuex 中的 index.js

import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    login,
    segments,
    itemList,
    orderList
  },
  plugins: [
    createPersistedState()
  ]
})

vue-router 中的 index.js（我想使用 getter 进行登录状态检查）

import store from '@/store'

Vue.use(Router)

const ifAuthenticated = (to, from, next) => {
  if (store.getters.loginStatus) {
    next()
  } else {
    next({
      path: '/login',
      query: { redirect: to.fullPath }
    })
  }
}

login.js（Vuex 中的存储模块）

const state = …

当我使用没有标签的路由器链接时，我可以 ctrl+单击此链接以在新选项卡中打开该链接。与标签一起使用时。例如tag="td"ctrl+click 不再起作用。使用生成的可点击元素也是如此@click.prevent

<router-link :to="`/contracts/${row.id}`">
  {{ row.type | initials }}
</router-link>

这适用于 ctrl+click

<router-link tag="td" :to="`/contracts/${row.id}`">
  {{ row.type | initials }}
</router-link>
<td @click.prevent="someAction()">
  {{ row.type | initials }}
</router-link>

这不起作用。

是什么导致了这种行为，可以采取什么措施？

如果我在 vue.config.js 中使用 baseUrl 例如。'/directory1' 在设置 vue-router 时我也必须有 base: '/directory1' 否则它会路由到 '/'。

我希望能够在我的 vue 应用程序中引用 baseUrl，这样我就可以在我的 vue 路由器设置中使用 baseUrl，这可能吗？

我在寻找如何去做，但我没有在任何地方找到我的问题的答案。

让我解释一下，我有我的页面，我在其中加载了我创建的“日期选择器”组件。我将在路由器视图中加载的大多数组件中都需要它。我的问题是，如果可能，我会在路由器视图中加载特定组件时禁用它。

<main>
  <date-picker></date-picker>
  <router-view></router-view>
</main> 

除了在他们使用的组件中嵌套我的“日期选择器”组件之外，还有其他解决方案吗？如果有帮助，我会使用 Vuex。

提前致谢。

我有一个vue项目，laravel作为a back-end，我必须检查用户是否具有访问资源或视图的权限，在后端，我使用laravel权限来完成此操作，并且工作正常，我现在遇到的问题在前面结束。

我在登录时获取用户权限并将其保存在上localStorage，现在如果该用户没有权限，该如何阻止用户输入特定路由？

例如我有这些路线

    {
      path: 'users',
      name: 'Users',
      component: Users,
      meta : {
        permissions: 'read_users'
      }
    },
    {
      path: 'roles-permissions',
      name: 'RolesPermissions',
      component: RolesPermissions,
      meta : {
        permissions: 'read_roles'
      }
    },
    {
      path: 'roles-permissions/create',
      name: 'CreateRolesPermissions',
      component: CreateRolesPermissions,
      meta : {
        permissions: 'create_roles'
      }
    },
    {
      path: 'roles-permissions/:id/edit',
      name: 'EditRolesPermissions',
      component: EditRolesPermissions,
      meta : {
        permissions: 'edit_roles'
      }
    },
    {
      path: 'customers',
      name: 'Clientes',
      component: CustomersList …