标签: vue-router

我在 Vue.js 应用程序中开发登录/注册系统。我希望在拨打电话时更新导航栏中的项目this.$router.push('/')。

应用程序.vue：

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

导航栏组件：

export default {
    name: "Navbar",
    data: function() {
        return {
            isLoggedIn: false,
            currentUser: null
        }
    },
    methods: {
        getAuthInfo: function() {
            this.isLoggedIn = this.auth.isLoggedIn();
            if (this.isLoggedIn) {
                this.currentUser = this.auth.currentUser();
            }
        }
    },
    mounted: function() {
        this.getAuthInfo();
    },
    updated: function() {
        this.getAuthInfo();
    }
}

这是我重定向到另一个页面的方法：

const self = this;
this.axios
    .post('/login', formData)
    .then(function(data) {
        self.auth.saveToken(data.data.token);
        self.$router.push('/');
    })
    .catch(function(error) {
        console.log(error);
        self.errorMessage = 'Error!';
    });

摘要： …

我的 Nuxt 应用程序加载一个链接，它是路线上的子视图http://127.0.0.1/user/:id。我将用户的 API 调用放在mounted路由器视图的钩子中。

如果路由id发生变化，则不再触发 Mounted，因为子视图已经加载。我最终得到了解决方案 - 监视 $route.params.id 并将 API 调用从 Mounted 移至此观察程序。

  watch: {
    $route() {
      this.getRows()
    }
  }

有一个更好的方法吗？

I\xc2\xb4ve 使用 vue-router 实现了选项卡。当用户在这些选项卡中来回单击，但随后又想转到上一页时，他需要多次按“后退”以首先回放每个选项卡访问。

是否可以从 vue-router 的历史记录中排除路由，例如：

let router = new VueRouter({\n        mode: \'history\',\n        routes: [\n             .\n             .\n             .\n            {\n                path: \'/tabs/\',\n                name: \'tabs\',\n                component: TabPage\n                children: [\n                            {\n                                path: \'tab1\',\n                                name: \'tab1\',\n                                component: Tab1Page,\n                                excludeFromHistory: true\n                            },\n                            {\n                                path: \'tab2\',\n                                name: \'tab2\',\n                                component: Tab2Page\n                                excludeFromHistory: true\n                            },\n\n                ]\n            }\n       ]\n   });\n

我创建了一个 vue.js 路由器，并使用后面找到的结构插入在数组中找到的链接。这会水平显示链接。但是，我想插入下拉菜单，而不是简单的链接。可以使用这个或类似的结构以某种方式完成吗？

<nav style="text-align: right">
  <router-link class="spacing" v-for="routes in links"
  v-bind:key="routes.id"
  :to="`${routes.page}`">{{routes.text}}</router-link>
</nav>

      links: [
    {
      id: 0,
      text: 'Buy',
      page: '/Buy'
    },
    {
      id: 1,
      text: 'Sale',
      page: '/Sale'
    },
    {
      id: 2,
      text: 'Transactions',
      page: '/Transactions'
    },
    {
      id: 3,
      text: 'Help',
      page: '/Help'
    }
  ]

我有一个 Quasar 应用程序，我想在以下场景中使用 keep-alive 缓存某些页面：用户从主页导航到第 1 页，然后从第 1 页用户导航到第 2 页，然后用户使用 $router.back 返回() 从第 2 页到第 1 页，在当前场景中，mounted() 钩子在第 1 页中再次运行，并且页面重新渲染，进行另一个完全没有必要的 API 调用。我当前的实现如下所示：

  <q-page-container class="overflow-auto">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </q-page-container>

我已经在路线和页面本身中设置了名称属性。我也尝试使用 include="Home,Workout" 但结果是相同的，安装的钩子每次都会运行并且页面会重新渲染。我还需要页面保持活动状态，以便我可以更改滚动行为，滚动回用户之前所在的位置left Page 1. 这被记住了，我可以看到控制台日志，例如显示y:883，但由于页面被重新渲染，它再次出现在顶部。值得一提的是，我正在使用路由器哈希模式？

我在 vue 路由上添加身份验证，但它没有重定向回登录页面。

给出这个错误

Error: Navigation cancelled from "/" to "/pages/login" with a new navigation.

这是我在路线上应用它的方法

router.beforeEach((to, from, next) => {

  

    // If auth required, check login. If login fails redirect to login page

    if (!(auth.isAuthenticated())) {

        router.push({ path: '/pages/login', name: 'page-login', component: '@/views/pages/login/Login.vue' })
       

    }

    return next()
       

})

我认为它在循环内并且重定向太多次

我正在使用 vue js 3，但我遇到了这个错误。我尝试使用路由器。

我的 main.js 文件在这里：

import { createApp } from 'vue'
import App from './App.vue'

import VueRouter from 'vue-router'  // i added this
import Vue from 'vue';    // and this
Vue.use(VueRouter);       // and this

createApp(App).mount('#app')

我的 package.json 文件在这里：

{
  "name": "router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0", …

我想通过 vue 路由器传递道具，路由器链接如下所示

<router-link :to="{ name: 'product-details', params: { productId: 123 } }" class="product-sbb d-block">

这是我的路线

{
  path: '/product/details/:productId',
  name: 'product-details',
  props: true,
  components: {
   navbar: Navbar,
   default: ProductDetail,
   footer: Footer
 },
},

我已将 props 设置为 true 并将参数添加到路径/:productId。我还按照此链接中的示例进行操作 https://codesandbox.io/s/o41j762pnz

我试图将该道具传递给我的组件，但是当我想在组件中使用该道具时，道具始终为undefined。这是我的组件

import ProductDetail from '../components/parts/ProductDetailGallery.vue';

export default {
  props: {
    productId: Number
  },
  data() {
  },
  created() {
    console.log(this.productId)
  }
}

我的做法与该示例完全相同，该示例运行完美，没有任何问题，但我的却没有。我该如何解决这个问题？

谢谢

我想在导航栏元素之间进行转换，因此我使用路由器链接。对于 /about 部分，过渡效果很好，但对于其他部分，它完全停止工作。如果我在 /something 上并返回到 /about，过渡也有效，但对于其他路线则不然。

我能做什么有什么建议吗？

应用程序.vue

<template>
  <div>
    <Navbar/>
    <div>
      <router-link to="/about"/>
      <router-link to="/experience"/>
      <router-link to="/education"/>
      <router-link to="/contact"/>
    </div>
    <Transition name="slide-fade" mode="out-in">
      <router-view/> 
    </Transition>
  </div>
</template>

<style>
  .slide-fade-enter-active {
    transition: all 0.3s ease-out;
  }
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateX(2em);
    opacity: 0;
  }
</style>

路由器.js

const routes = [
    {
        path:'/about',
        name: 'About',
        component: About
    },
    {
        path:'/experience',
        name: 'Experience',
        component: Experience
    },
    {
        path:'/education',
        name: 'Education',
        component: Education
    },
    {
        path:'/contact',
        name: 'Contact',
        component: Contact
    }
]

const …

应用程序的主页/基本 URL 可以毫无问题地刷新。但其他页面在页面刷新时返回 404。请问有什么解决办法吗？

这是 404 的屏幕截图。[1]：https ://i.stack.imgur.com/lc8xD.png