vue-router3.0 报warning无法匹配路由

最新推荐文章于 2023-06-15 23:08:24 发布
最新推荐文章于 2023-06-15 23:08:24 发布
阅读量2.4k 收藏
点赞数
分类专栏： 学习笔记 文章标签： vue.js vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/runOnWay/article/details/110194012
版权

使用this.$router.push({ name: ‘xxx’ })，xxx为路由的name值，达到跳转页面的目的，vue-router报错如下：

missing param for named route “xxx”: Expected “0” to be defined

解决如下：

this.$router.push({ name: 'xxx', params: { '0': 'xxx' }})

虽然解决了，但是完全不知道为何发生，又为何结束

runOnWay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue3 - vueRouter4 路由导致警告报错 [Vue Router warn] No match found for location with path “x“（vue3+router4）
高级前端工程师
05-08 3266
vue3，router4，路由，报错，警告，vue-router4路由，vue3路由出现警告，vue-roter4实现动态加载路由，权限动态设置路由，动态路由，刷新页面报错，跳转页面警告，VueRouter4， [Vue Router warn] No match found for location with path，详解vue-router中matcher，详细解决方案，依旧无法解决一直报错，解决Vue3.0 页面刷新，vue3 addRoute 动态路由 页面刷新后 路由失效，addRoute，浏览
[Vue Router warn]: No match found for location with path 出现空白页面
最新发布
nuli23的博客
03-08 1297
唯一性。
使用router.push的name属性调转时无法匹配404页面
等待唐僧的悟空
04-07 526
首先要路由的最后插入404组件//前面已定以404组件，这里作转发 let router404 = { path:'*', redirect:'/404', hidden:true }在路由守卫处添加该代码if(to.matched.length !== 0 ){ next() ...
[vue-router] missing param for named route “search“: Expected “keyword“ to be defined
m0_52410816的博客
04-02 1390
missing param for named route "search": Expected "keyword" to be defined
vue2之 missing param for named route "xxxx"
weixin_33861800的博客
07-06 6120
场景： 解决方法：可以做的是将其包含router-link在适当的位置v-if，以便在您的异步数据实际到达之前不会尝试渲染。 html代码： <div id="app" class="container"> <p> <router-link to="/foo">Go to Foo</router-link> &...
Vue3 使用 Vue Router 时，prams 传参失效和报错问题
qq_33565046的博客
03-27 9269
个人觉得这么写很鸡肋： 如果不把params参数写在路由路径中无法得到 params 参数，这种方式的params参数又会显示在地址栏。只要改成query 传参就好了,注意query传参只能用路由表中的 path ,不是 name ,并且所有参数都会显示在URL 地址上。[传递 state，在新页面使用 History API 接收参数](#使用 History API 方式传递和接收)使用 meta 原信息方式传递 (此方式更适用于路由守卫)注意，如果使用使用了这种动态路由匹配方式，
vite+vue3+ts 报错和解决办法汇总
huangpb的博客
06-15 2202
在 tsconfig.node.json 文件的 compilerOptions 添加配置 "allowSyntheticDefaultImports": true。这将告诉TypeScript使用Node.js的模块解析方式来查找模块。下配置 "moduleResolution": "node"这时你可以重启一下VSCode就不会报错了。文件的 compilerOptions。在 tsconfig.app.json。
vue-router-mock::test_tube:在您的Vue应用中轻松模拟路由交互
03-30
Vue路由器模拟 在您的Vue 3应用中轻松模拟路由交互 :warning: 该库旨在与编写测试的人员合作，以创造更好的体验，以编写涉及将路由与Vue结合使用的测试。 在问题和讨论中欢迎您的反馈和经验丰富的人员来提出API形状...
vue-multiple-tabs:vue-cli3 动态路由, 复用路由, 自动注入路由, 增删路由, 实战多tab页
04-29
该工程是基于vue的动态路由案例，复用一个组件，打开多个tab标签页，实现商品类组件复用，可以多tab打开 TODO refactor base on vue-cli3 2019.9.21 特性 复用组件多tab打开 刷新动态路由页面不丢失 支持路由...
vue学习笔记，B站黑马程序员的javaweb
11-05
其中，node_modules是存放依赖包的文件夹，public是存放项目的静态文件的文件夹，src是存放源代码的文件夹，assets是存放静态资源的文件夹，components是可重用组件的文件夹，router是路由配置的文件夹，views是视图...
warning-test
04-08
开发者可能使用了Vue Router进行路由管理，Vuex进行状态管理，或者Vuetify、Element UI等UI库来构建用户界面。 至于文件“warning-test-main”，这可能是项目的主入口文件，通常在Vue项目中是`main.js`。这个文件会...
vuenotifyme一个Vue的可堆叠通知警报
08-08
比如，可以配合Vuex进行状态管理，或与Vue Router配合，在路由切换时触发特定的通知。 ### 8. 示例代码 ```javascript import Vue from 'vue' import NotifyMe from 'vue-notify-me' Vue.use(NotifyMe) // 显示...
vue3+TS报错：不能将类型“unknown”分配给类型“string”（TS）
热门推荐
潮汐未见潮落的博客
11-22 1万+
vue3+TS报错：不能将类型“unknown”分配给类型“string”（TS）
39.Vue3：路由传递参数
m0_63953077的博客
10-09 964
Vue3：路由传递参数
vue-router 路径参数丢失问题逻辑思考
weixin_40220492的博客
06-15 317
vue-router 路径参数丢失问题逻辑思考
Vue3 vue-router刷新获取不到路由路径
yu3278326的博客
07-29 5436
今天修改写页面的时候发现一个Bug，底部导航栏默认是在首页，在其他页面进行刷新的时候，导航栏active又回回到首页，这样体验很不好 环境 "vue-router": "^4.0.10", "vue": "^3.0.5", "vant": "^3.1.5", <!-- template --> <router-view /> <van-tabbar v-model="navActive" active-color="#e4313
vue-router 动态路由 warning:Route with name ‘Menu‘ does not exist
News777的博客
10-10 1373
vue-router 动态路由 warning:Route with name 'Menu' does not exist
解决Vue-Router升级导致的报错问题
weixin_44576277的博客
12-18 1271
Error: Redirected when going from "/user" to "/cart" via a navigation guard.
VUE 之 动态路由
夜阑珊妖妖
09-30 2213
动态路由： <router-link tag="li" :to="{name:'question', params:{id:question.questionId}}" v-for="question in questionList" :key="question.questionId"> {{ question.title }} </route...
使用vue3 + ts + element-plus + axios + router + Pinia + vite编译 1、动态生成路由，模块化管理 2、支持国际化 3、支持换肤
05-23
好的，首先你需要安装Vue CLI脚手架工具，然后创建一个Vue3项目。接下来你需要安装一些依赖包： ``` npm install --save-dev typescript @vue/cli-plugin-typescript @vue/compiler-sfc vite ``` 然后你可以使用以下命令来创建一个Vue3项目： ``` vue create my-project ``` 安装完毕后，你需要进入项目目录并执行以下命令来安装其他依赖包： ``` npm install --save vue-router axios element-plus pinia npm install --save-dev vite-plugin-style-import ``` 接下来，你需要创建一个 `src/router/routes.ts` 文件来定义你的路由。你可以根据自己的需求定义路由信息。例如： ``` import { RouteRecordRaw } from 'vue-router' const routes: RouteRecordRaw[] = [ { path: '/', component: () => import('@/views/Home.vue') }, { path: '/about', component: () => import('@/views/About.vue') } ] export default routes ``` 然后你需要修改 `src/router/index.ts` 文件来动态生成路由。你可以使用以下代码： ``` import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router' import routes from './routes' const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [] as RouteRecordRaw[] }) router.beforeEach(async (to, from, next) => { if (router.getRoutes().length === 0) { router.addRoute(routes) next({ ...to, replace: true }) } else { next() } }) export default router ``` 接下来，你需要创建一个 `src/i18n` 目录来支持国际化。你可以使用 `vue-i18n` 库来实现。例如： ``` import { createI18n } from 'vue-i18n' import messages from './messages' const i18n = createI18n({ locale: 'en', fallbackLocale: 'en', messages }) export default i18n ``` 然后你需要创建一个 `src/i18n/messages.ts` 文件来定义你的翻译信息。例如： ``` const messages = { en: { hello: 'Hello World!' }, zh: { hello: '你好，世界！' } } export default messages ``` 接下来，你需要创建一个 `src/styles/variables.scss` 文件来定义你的主题变量。例如： ``` $primary-color: #1890ff; $success-color: #52c41a; $info-color: #1890ff; $warning-color: #faad14; $error-color: #f5222d; ``` 然后你需要在 `src/main.ts` 文件中引入这个文件： ``` import './styles/variables.scss' ``` 接下来，你需要安装 `vite-plugin-style-import` 来支持按需加载 Element Plus 的样式。例如： ``` import { createApp } from 'vue' import App from './App.vue' import router from './router' import i18n from './i18n' import 'element-plus/lib/theme-chalk/index.css' const app = createApp(App) app.use(router) app.use(i18n) app.mount('#app') ``` 最后，你需要在 `vite.config.ts` 文件中添加以下配置来支持换肤功能： ``` import { UserConfig } from 'vite' const config: UserConfig = { css: { preprocessorOptions: { scss: { additionalData: ` @import "src/styles/variables.scss"; ` } } } } export default config ``` 好了，现在你已经成功地使用 Vue3 + TypeScript + Element Plus + Axios + Router + Pinia + Vite 编译一个支持动态生成路由、国际化和换肤的项目了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值