标签: vue-router

我需要在我的 vue ja 2 应用程序中设置 vue 路由器。我没有使用 vue cli，只是使用 vue Js 的 cdn。我无法找到如何使用 cdn 设置 vue 路由器的方法。任何人都可以建议任何文档或者如何实现这一点的技术？任何帮助将非常感激

vue app我正在尝试使用vue-router进入 UserDetail 路径。

我的路线是：

const routes = [
  { path: '/users', component: UserList },
  { path: '/users/:user_id', component: UserDetail },
  { path: '/bar', component: Bar }
]

和路由器链接：

    <td><router-link :to = "{ path: 'users/:user_id', params: {user_id: user.id}} ">{{user.name}}</router-link></td>  

但这显然不是正确的语法。我通常使用命名路由（例如，参见https://router.vuejs.org/en/api/router-link.html ）来处理此类内容，但我如何使用路径？

编辑#1

将鼠标悬停在其中一个链接上：

我在让 VueRouter 导航时遇到问题。在我的应用程序中，一些页面工作正常，并且使用相同的代码，其他页面路由不起作用/页面不更新导航。

路由器有问题吗？就像你不能从组件内部调用路由器一样，或者......？

我的应用程序中的命名路线

export default new VueRouter({
  routes: [
    {
      path: '/grams/one/:cname',
      component: GramsOne,
      name: "gramsOne"
    },
  ...

然后在页面上的组件内：

<q-btn v-for='(rel, key) in gram.relatedItems' :key='key'
  color='secondary'
  @click="goGram(rel)"
  >
  {{rel.cn}}
</q-btn>


// later in the script:

  methods: {
    goGram(gram) {
      let newRoute = {
        name: 'gramsOne',
        params: {cname: gram.cname}
      }
      console.log('goGram', newRoute)
      this.$router.push(newRoute)
    }
  },

在同一页面的其他地方，简单的路由工作。URL 地址将在浏览器中更新。我看到带有路由信息的正确控制台日志

但页面/内容不会改变。

更新 URL 栏后，我可以按 ctrl-R 并加载新页面。所以目标路线工作正常。

从同一个应用程序中的其他页面，我可以使用相同的路线来定位新目的地并正常加载。

这也加载了相同的 URL，只是导致问题的查询参数不同。

/app/items/foo /app/items/bar

哪里bar是某种属性的类型/app/items/:foo

我尝试了命名路由、路由使用等的各种组合，但看不到模式。

"vue": "~2.5.0",
"vue-resource": "^1.3.4",
"vue-router": "^2.7.0" …

使用 VueJS 时遇到问题（第一次使用）

• 我在 doc root 的 index.html 文件中有 90% 的页面模板
• 我有 3 个组件（每个组件都包含每个“页面”的主要内容正文）

我的路由器：

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/gallery',
      name: 'Gallery',
      component: Gallery
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

我无法开始<router-link :to="{ name: 'Gallery' }">Gallery</router-link>工作 - 我的网站没有将它们呈现为我的 index.html 中的锚标记（我可能不明白如何/在哪里可以使用 Vue） - 所以我使用的是标准链接，例如<a class="nav-link" href="/gallery">Gallery</a>

问题：

虽然所有这些代码在我的本地机器上运行良好，但它在我上传代码的任何地方都不起作用（我想让它在 Netlify 上运行）。Netlify 和其他站点会覆盖我删除哈希的尝试，因此我的链接然后链接到例如

https://examplesite.com/#/ => https://examplesite.com/gallery#/

路线更改不会滚动到顶部，因此 Vue 创建者建议使用导航守卫。在更新版本中：

Router.beforeEach(function (to, from, next) {
  window.scrollTo(0, 0)
  next();
})

完美，除了它在我的应用程序中产生这个致命错误： ncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_1__.default.beforeEach is not a function

为什么？

以防万一这是我完整的 router.js 文件：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import PastEvents from './views/PastEvents.vue'
import BasicPage from './views/BasicPage.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/past-events',
      name: 'past-events',
      component: PastEvents
    },
    {
      path: '/basic-page',
      name: 'basic-page',
      component: BasicPage …

我正在使用v-for循环来显示分页链接 -

<div v-for="n in this.totalPages">
   <router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser">{{ n }}</router-link>
</div>

每个链接都显示在新行中，如下所示 -

1

2

有什么办法可以将它们显示在单行中吗？像这样 -

1 2

谢谢。

我有一个 Vue 组件，用于与$route.
由于我进行了一些升级，它不再起作用，我收到消息：

[Vue warn]：无效的监视源：“$route”。监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。

这是我的package.json：

{
    "name": "prix-de-gros.vue",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@vue/composition-api": "0.6.6",
        "axios": "^0.19.2",
        "chart.js": "^2.9.3",
        "core-js": "^3.6.5",
        "moment": "^2.27.0",
        "regenerator-runtime": "^0.13.7",
        "remove": "^0.1.5",
        "slugify": "^1.4.5",
        "tiptap-vuetify": "^2.24.0",
        "vue": "^2.6.12",
        "vue-i18n": "^8.21.0",
        "vue-router": "^3.4.3",
        "vuetify": "^2.3.9",
        "vuex": "^3.5.1",
        "webpack": "^4.44.1"
    },
    "devDependencies": {
        "@mdi/js": "^5.5.55",
        "@vue/cli-plugin-babel": "^4.5.4",
        "@vue/cli-plugin-eslint": "^4.5.4",
        "@vue/cli-plugin-router": "^4.5.4",
        "@vue/cli-plugin-vuex": "^4.5.4",
        "@vue/cli-service": "^4.5.4",
        "@vue/eslint-config-prettier": …

我正在尝试使用 laravel 和 vuejs 创建简单的 CRUD。当我运行 ' npm run watch' 它说 npm run watch

而且，当我运行时php artisan serve，它没有显示任何错误

本地主机

这是我的代码 app.js

应用程序

我正在使用 vue-router 并传递一些参数来打开一个新选项卡。我不想传递查询参数，因为我不希望用户看到它们。因此，每当打开新页面时，我传递的参数都不存在。我认为即使我在新页面中打开也应该可以访问这些参数，对吧？

      let routeData = this.$router.resolve({ path: '/link/component', params: {
      param1: 'value1',
      param2: 'value2',
  }})
  
      window.open(routeData.href, '_blank')

在我的组件中，我尝试以这种方式访问​​参数，但它是未定义的。

console.log("this",this.$route.params)

我无法清楚地弄清楚 vue 路由器中 params 和 query 之间的区别。我最近遇到一个案例，让我很困惑。有页面A和页面B，我想从页面A路由到页面B，页面B使用动态路由（例如'/user/:id/:age/:address'）并且数据来自params对象（get id, age, address from params)，当我重新加载页面 B 时，它失败并抛出 404 not found (cannont get /user/1/24/xxxstreet)。如果我使用查询而不是参数（例如'/user?id=1&age=24&address=xxxstreet'），我可以重新加载页面。那么有人可以帮我弄清楚vue路由器中params和query之间的区别吗？