标签: vue-router

我有以下 app.js 文件作为主要的 Vue 组件。

import './bootstrap';
import router from './routes';

new Vue({
    el: '#app',
    router: router

});

我的 bootstrap.js 如下

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

// Global variable for API access
window.hostname = 'https://city.molotex.ru/cgi-bin/citygate.py?';

// Global variable for VueJS
window.Vue = Vue;

// Vue router
Vue.use(VueRouter);

//Vue Resource
var VueResource = require('vue-resource');
Vue.use(VueResource);

// axios
window.axios = axios;

window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) …

我有一个带有 vue 路由器的 vue.js 应用程序来渲染各种组件。我有一个/home加载 home 组件的路径。在开发环境中，我可以通过localhost:8080/home在地址栏中给出并使用<router-link>. 当我将生产版本部署到 apache 服务器时，当我给出localhost/home错误时

在此服务器上找不到请求的 URL /home。

但是localhost/home当我们点击链接时，这些链接是有效的并且显示在地址栏中 为什么会发生这种情况？如何解决这个问题？

适用于我的其他路线，如“/dashboard”等，但出现在所有路线中。我基本上希望这个模板只在 url 为“/”时出现。在我的整个项目中都尝试过，只是李子不起作用。请帮忙，谢谢！！任何建议。

<template v-if="main">
  <div id="accordion-nav">
    <div class="accordion-panels">
      <a href="/dashboard">Dashboard <i class="fa fa-caret-right" aria-hidden="true"></i></a>
    </div>
    <div class="accordion-panels">
      <a href="/shifts">Shifts <i class="fa fa-caret-right" aria-hidden="true"></i></a>
    </div>
    <div class="accordion-panels">
      <a href="/other">Other <i class="fa fa-caret-right" aria-hidden="true"></i></a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'accordion-nav',
  computed: {
    main: function () {
      return this.$route.path.indexOf('/') === 0
    }
  }
}
</script>

<style scoped>
</style>

根据 VueRouter 文档，可以添加元字段并根据其值全局限制路由。

按照概述尝试实现后，我收到一个错误：

ReferenceError: record is not defined (line 46)

这对应于这一行：

if (!hasCookies(record.meta.cookies)) {

这是具有路由器保护逻辑的文件：

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

Vue.use(VueRouter);

const routes = [
  { 
    path : '/authenticate/:id', 
    component : require ('./components/authenticate.vue'),
    redirect: '/here',
  },

  // can only get here if the passcode has been filled out
  {
    path : '/client/create',
    component : require('./components/createClientForm.vue'),
    meta : {
      cookies: ['passcode_cookie'], // need passcode to be able to create the client
      redirect: '/authenticate/1' // dummy …

我是 Vue 新手。我一直在尝试使用 Vue-Router 设置一个简单的路由。但我有一个问题，我不知道为什么。

我能看到的“仪表盘”的消息，当我去到URL“ HTTP：//本地主机：8080 /＃/ ”，但我看不到“登录”当我去到URL“ HTTP：//本地主机：8080 /＃ /登录”。

谢谢

索引.js

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/components/Dashboard'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Dashboard
    },
    {
      path: '/login',
      Component: Login
    }
  ]
})

登录.vue

<template>
    <p>Login</p>
</template>

<script>
  export default {}
</script>

应用程序

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

仪表板.vue

<template>
    <p>Dashboard</p>
</template>

<script>
  export default …

我有一个这样的页面：

<template>
  <div class="row flex">
    {{posts.id}}
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    async asyncData ({ route }) {
      let { data } = await axios.get('http://localhost:8000/api/v1/feeds/' + route.params.id + '/')
      return {
        posts: data
      }
    }
  }
</script>

当我单击带有热重载（路由器链接）的链接时，它显示良好。但是当我重新加载这个窗口时，它会在 1 秒内出现然后消失。

视频：http : //g.recordit.co/ht0a0K2X81.gif

错误日志：

我怎样才能解决这个问题？

我使用vue-router在组件中进行程序化导航无法正常工作。成功登录后，我要将其重定向到仪表板页面。但是什么也没发生...

相关代码-路由器：

import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '@/components/Login'
import Dashboard from '@/components/Dashboard'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      beforeEnter: (to, from, next) => {
        if (store.getters.isAuthenticated) {
          // if user is already authenticated,
          // redirect it to the dashboard
          next('/dashboard') // it works
        } else {
          next()
        }
      }
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      beforeEnter: (to, from, …

在我的 Vue 2 应用程序中，我有一个菜单栏，其菜单项使用路由器链接。这些菜单项之一是“客户”，它将用户带到客户编辑器。现在，如果用户在客户编辑器中单击相同的“客户”菜单项，则不会发生任何事情。我认为这是因为文档中提到的这种行为：“在 HTML5 历史模式下，路由器链接将拦截点击事件，以便浏览器不会尝试重新加载页面。”

现在，这是完全可以理解的，而且在大多数情况下，这将是我想要的行为。但实际上在这里我希望重新加载组件，回到干净的状态。或者更准确地说，对于发生的某些事件，我可以在客户编辑器中处理这些事件以设置我希望它们成为的样子。事实上，我认为情况会是这样，但是当我设置手表时，因此

    watch: {
      '$route' (to, from) {
        console.log("Route changed");
      }
    },

我没有看到任何记录到控制台的内容。可能发生了一些我没有处理的事件，而 Vue 只是简单地重用了该组件。但是我怎样才能阻止它这样做呢？

我有 2 个网址

• /register

• /register?sponsor=4

该/register路由将给我一个干净的输入文本，我可以在其中输入所有内容
，第二个路由将带来相同的输入，但它的值为 4 并且它被禁用，因此用户无法修改它。
我设法使用 vue-router 从路由器动态获取参数，一切都很好，
但是当我访问时，/register我得到了干净的输入，但是一旦我开始输入，输入就会被禁用，我只能输入一个字符。
这是我到目前为止尝试过的，
HTML：

<input :disabled="sponsor ? true : false" v-model="sponsor" id="sponsor" type="number" class="form-control" name="sponsor" value="" required tabindex="14">  

Javascript Vuejs

<script type="text/javascript">
    var router = new VueRouter({
        mode: 'history',
        routes: []
    });
    new Vue({
        router,
        el: '#app',
        data () {
            return {
                cities: [],
                city: '',
                selectedCountry: '',
                sponsor: null
            }
        },
        mounted: function() {
            if (this.$route.query.sponsor) {
                this.sponsor = this.$route.query.sponsor
                console.log(this.sponsor)
            }
        },
        methods: …

使用 vue.js 和 vue-router，有没有办法在点击“router-link”后重新创建一个与当前路由相同的路由的组件？

基本上，如果单击通向当前路由的“路由器链接”可以重新启动我的组件的“created()”或“mounted()”函数，那就太好了。

也许“$watch”有什么技巧，或者类似的东西，我真的不知道！