标签: vue-router

我正在尝试编辑我的路由器链接，以便当链接处于活动状态时文本的颜色以及背景会发生变化。

在课程中.router-link-exact-active，我已经设置了它，以便背景从某些默认值正确更改，但文本颜色始终保持不变？

事实上，改变链接文本颜色（包括非活动的默认蓝色）的唯一方法是设置标签本身的样式。

我的链接代码如下：

<router-link :to="{path: '/Homer'}" exact tag="li"><a>Homer</a></router-link>

标签的 CSS（在链接激活之前设置颜色 - 它是标准颜色）：

a {
  color:royalblue;
  text-decoration: none;
}

router-exact-link-active 的 CSS 是：

.router-link-exact-active {
  background: yellow;
  border-radius: 5px;
  color: red;
  font-variant: italic;
}

因此，li 的背景颜色（当然，因为 router-link 设置为 li 标记）正确更改，但文本颜色无论如何仍然保持蓝色。

文本的颜色（和其他设置样式）不应该层叠吗父 li 分配的活动类向下级联到标签（无论路由器链接处于活动状态还是不活动状态） - 例如本教程中的 https： //youtu.be/yn0_6T4HwHs?t=266?

如果不是，我如何在文本处于活动状态时设置文本样式 - 我猜我会将某种活动类附加到 - 不是 a:active 的类，因为一旦鼠标处于活动状态，文本就不是“活动”的点击它后 - 但我似乎找不到正确的方法来做到这一点？

抱歉，如果这是一个非常基本的问题，但我四处寻找答案但找不到。

非常感谢。

我正在使用 Vue Router 并设置meta对象字段，该字段用于设置页面标题和描述。

现在我设置的路线是这样的：

[...
{
   path: '/page1',
   component: Page1Component,
   meta: {
      title: 'Title for page1'
   }
}
...]

然后将其与 DOM 同步：

router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
});

我的路线之一，我想在标题中使用查询字符串，但我无法将函数传递给对象meta。有没有一种方法可以做到这一点，而无需在组件中定义标题？

例如，我想做的事情：

[...
{
   path: '/page1',
   component: Page1Component,
   meta: (route) => {
      title: `dynamic title is ${route.query.param}`
   }
}
...]

我有一个主要的 App.vue 组件。在那里，我有以下代码：

export default {
  data() {
    return {
      testVariable:false
    }
  },
}
</script>

<template>
  <VApp :dark="testVariable:false"
    <div id="app">
      <RouterView :key="$route.fullPath" />
    </div>
  </VApp>
</template>

然后在其中一个组件中，我有以下代码：

data() {
    return {
      testVariable: this.$root.$children[0].testVariable,
    }
  },

methods: {
    darkModeToggle(e) {
      this.$root.$children[0].testVariable = e
    },
  },

问题1）this.$root 和 this.$root.children 是什么意思？始终是this.$rootApp.vue 组件（因为 App.vue 是所有组件的父组件）。是this.$root.children这个 App.vue 组件的子组件，这意味着所有其他组件都将在this.$root.children数组中？

问题2）这行是什么意思？<RouterView :key="$route.fullPath" />。我的意思是为什么我们会通过:key="$route.fullPath"?

我是 Vue 新手，我正在努力让我的路线正常工作。我只需要使用该文章的 ID 进入我的详细信息页面即可。

我尝试了很多教程但没有成功。（我在制作项目后手动安装了路线）

但我遇到了一个不常见的错误。我没有\xe2\x80\x99找不到任何解决方案。

（在chrome的控制台发现错误）

未捕获的类型错误：routes.forEach 不是函数

] 1

//main.js\n\nimport Vue from \'vue\';\nimport VueRouter from \'vue-router\';\nimport \'@babel/polyfill\';\nimport \'mutationobserver-shim\';\nimport \'./plugins/bootstrap-vue\';\nimport App from \'./App.vue\';\nimport routes from \'./routes\';\n\nVue.use(VueRouter);\nwindow.Vue = Vue; \n\nVue.config.productionTip = false;\nwindow.Vue = require(\'vue\');\n\nconst router = new VueRouter({routes});\n\nnew Vue({\n   el: \'#app\',\n   router,\n  render: h => h(App),\n}).$mount(\'#app\');\n

// routes.js\n\nimport Vue from \'vue\';\nimport Router from \'vue-router\';\nimport Homepage from \'./components/Homepage.vue\';\nimport Details from \'./components/Details.vue\';\n\n\n\nVue.use(Router);\n\nexport default new Router({\n  routes: [\n    {\n      path: \'/\',\n      name: \'homepage\',\n      component: Homepage\n …

我有一个Post显示用户帖子的组件。到达帖子的 URL/路线如下：

http://localhost:8080/123-todays-bike-ride作为路线中的参数123。PostID

在我的Post.vue组件中，我有以下代码：

<template>\n    <div>\n        <h1>{{Post.PostTitle}}</h1>\n        <p>{{Post.Content}}</p>\n    </div>\n</template>\n\n<script>\n    export default {\n        name: "Post",\n        watch:{\n            \'$route.params.PostID\': function() {\n                    this.getPost(); // does not seem to be triggered?\n                }\n        },\n        computed:\n            {\n                Post() {\n                    return this.$store.getters.getPost\n                }\n            },\n        serverPrefetch() {\n            return this.getPost();  // to do with SSR\n        },\n        mounted() {\n            if (this.Post == null || !this.Post.length) {\n                this.getPost();\n            }\n        },\n        methods: {\n            getPost() {\n                return this.$store.dispatch(\'loadPost\', {PostID: this.$route.params.PostID})\n\n            }\n        }\n    }\n</script>\n …

beforeRouteLeave单击 时会触发组件内防护<router-link to="/">。但是，当我以编程方式调用时，它不会被触发router.push({ path: "/" })。

难道这有什么问题吗？

编辑

我只是尝试制作一个沙箱，发现只要使用动态参数导航到同一路径就会发生这种情况。

例如，从 导航到/item/1会/item/2导致此问题。

我正在尝试将数据从一条路线传递到另一条路线。但是，我需要将 ID 和标题传递给子路由，并仅使用 URL 中的标题，而不使用 ID。我将使用 ID 来获取数据。我到处都读过，但我想不出解决我的问题的方法。

例子：

假设我们在名为“图书馆”的路线上，那里有不同的书籍。当点击其中一本书时，我想转到另一条路线，该路线将在 URL 中显示书名，并具有可用于数据获取的 ID。我怎样才能做到这一点？

我已经找到了如何进行动态 URL 匹配，我可以将其用于标题显示，但无法传递 ID：

<router-link :to="{path: '/Book/' + book.title}">

我还发现了如何使用命名路由传递参数，但是如何使用 URL 中的标题呢？

<router-link :to="{name: 'Book', params: {title: book.title}}">

我确信我在这里遗漏了一些东西，但我不完全确定是什么。

vue-router 运行良好，但我们想将路由推送到另一个文件中。一些代码来澄清：

// src/router/index.ts
import { route } from 'quasar/wrappers'
import VueRouter from 'vue-router'
import routes from './routes'

export default route(function ({ Vue }) {
  Vue.use(VueRouter)
  const Router = new VueRouter({
    scrollBehavior: () => ({ x: 0, y: 0 }),
    routes,
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE,
  })

  return Router
})

如果能够像这样在另一个文件中调整路线，那就太好了：

// src/services/auth/authService.ts
import router from 'src/router'

if (router.currentRoute.path === '/login') {
  console.log('authService push to /');
  router.push('/')
}

但这会引发错误：

TS2339：类型“RouteCallback”上不存在属性“currentRoute”。

我们可能没有正确导出/导入路由器。

我有一个 laravel 8 项目，并将 laravel-mix 升级到 v6 以支持 vue 3。

问题是来自 vue-router 4 的 createWebHistory

包.json

{
    "private": true,
    "scripts": {
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "production": "mix --production"
    },
    "devDependencies": {
        "@vue/compiler-sfc": "^3.0.3",
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^6.0.0-beta.14",
        "lodash": "^4.17.19",
        "postcss": "^8.1.10",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.29.0",
        "sass-loader": "^8.0.2",
        "vue-loader": "^16.1.0",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "mitt": "^2.1.0",
        "vue": "^3.0.3",
        "vue-cookie-next": "^1.0.3",
        "vue-router": "^4.0.0-rc.6",
        "vue-sweetalert2": "^4.1.1"
    }
}

webpack.mix.js

const …

我是一名经验丰富的前端开发人员，但我对 Ionic 很陌生，所以请原谅我问了一个愚蠢的问题。

我正在使用 Ionic-Vue 创建移动应用程序。

我从选项卡默认模板开始。我可以毫无问题地在选项卡之间切换：每个选项卡都有关联的路线和组件，并且当我切换选项卡时会立即显示正确的组件。

现在来说说问题。

我正在尝试为登录屏幕添加新的路由/组件。我希望登录屏幕位于选项卡系统之外，因此我将其作为顶级路由“/login”及其关联组件。我在第一个选项卡上添加了一个新按钮以便登录，这就是代码。

<ion-button href="/login">LOGIN</ion-button>

但是，当我按下按钮时，整个页面都会重新加载，切换组件所需的时间比我浏览不同选项卡时要多得多。在我看来，它没有使用内部路由器，而是更改了页面的实际 URL，导致整个应用程序再次向服务器请求。我认为这与我使用选项卡默认模板有关，也许如果您使用选项卡就不能拥有独立的路由？

这是我的路由表：

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/home'
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: 'home'
      },
      {
        path: 'home',
        component: () => import('@/views/Home.vue')
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => …