刚安装的nuxt框架搭配vue3使用路由的时候除了按照约定的规则配置路由以外,还可以使用基于vue-router写法的路由文件去做配置,需要如图所示的位置编写文件:
其中这样的路由要注意一下:
{ name: "group-team-demo-name", path: "/group-:team/demo-:name", component: () => import("~/pages/group-[team]/demo-[name].vue"), },
此路由是比较特殊的写法,可以使用如代码所示的方式获取路由的参数,中括号中的名字就是变量名称:
<template> 队名:{{ $route.params.team }} <br /> 姓名:{{ $route.params.name }} <button @click="back">返回</button> </template>
一般获取参数都用的是
$route.query,
这个$route.params目前发现的是只能获取中括号中的变量作为参数,如果有别的用处还希望大神指点。
另外最重要的一点是要在app.vue中配置一个系统的组件
<NuxtPage />
如代码:
<template> <div> <NuxtPage /> </div> </template>
大家试着配置一下吧标签:group,name,自定义,route,nuxtjs3,params,team,路由 From: https://www.cnblogs.com/llcdbk/p/16882258.html