我自己的想法串列，為什么 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 的請求讓我重定向到 Home。
我懷疑此代碼不足以進行故障排除，那么有什么想法可以除錯路由嗎？某處必須有 $router.params ，但我無法確定在運行時在哪里捕獲它的值或在哪里設定斷點。謝謝你。
uj5u.com熱心網友回復：
您可以使用beforeEnter鉤子進行除錯。有關更多路由器防護，請參閱此鏈接。
uj5u.com熱心網友回復：
您可能需要:id使用路由props配置將引數傳遞給組件：
{
path: '/product/:id',
name: "ProductDetails",
component: ProductDetails,
props: true
}
props: true, 將當前命名引數作為具有相同名稱的道具傳遞。在這種情況下，它假設您在 ProductDetails 中有一個要讀取的道具“id”。
另一種方法是讀取組件內部的路由引數：
$route.params.id
其他替代方案可以在這里找到：https : //router.vuejs.org/guide/essentials/passing-props.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/338441.html