时间戳

首页 > 解决方案 > 无法使用参数使 Vue 路由与组件一起使用

vue.js - 无法使用参数使 Vue 路由与组件一起使用

问题描述

我自己的想法列表，为什么 Vue 根本无法识别带有参数的路由并让我重定向到“/home”组件已经结束。其他简单的路线工作正常。

路线.js：

import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../components/login/Login.vue";
import Profile from "../components/profile/Profile.vue";
import ProductDetails from "../components/product/ProductDetails.vue";

import { partner_routes } from "../views/partner/routes";
import { purchase_routes } from "../views/purchase/routes";


import ProductCatalog from "@/views/product-catalog/ProductCatalog.vue";


const product_routes = [
  {
    path: "/product-catalog",
    name: "product-catalog",
    component: ProductCatalog,
  },
];



const routes = [

  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: '/product/:id',
    name: "ProductDetails",
    component: ProductDetails,
    // meta: {
    //   requiresAuth: true,
    // },
   },
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  {
    path: "/profile",
    name: "Profile",
    component: Profile,
    // meta: {
    //   requiresAuth: true,
    // },
  },

];

const router = new VueRouter({
  routes, // short for `routes: routes`
});
export default router;

请求 http://localhost:8080/product/1 让我重定向到主页。

我怀疑这段代码不足以进行故障排除，所以有什么想法可以调试路由吗？某处必须有 $router.params ，但我不知道在运行时在哪里捕获它的值或在哪里设置断点。谢谢你。

标签： vue.jsvue-router

解决方案

最后，我让它工作了。我已将“mode: history”添加到“const router = new VueRouter(...)”，现在正在解析新路由。我仍然不知道为什么新路由（甚至没有参数化，因为它后来证明）不能在哈希模式下工作，而像“/profile”这样的旧路由工作正常。我测试过的网址不包含哈希“#”。

推荐阅读