Vue---传参params 、query刷新页面参数会丢失

从其他页面传过来的参数刷新页面的时候参数会丢失

解决办法，只有常用的两种方法

注意点1、路由后面必须带参数，2、传参的页面中name: 'content',不能写成name: '/content',

hash模式中的#相当于读取一个锚点链接，而history主要是读取主域名后面的参数也是相当于描点但是为了好看去除掉了链接上的#

例：taobaocom是主域名，taobaocom/#list 这时锚点到当前list的位置，再去请求相应的js和css

因为history模式中，头部链接是以/模式进行，而后端配置路由一般是由Nginx代理的，例如:taobaocom/list ，Nginx只会判断你有没有list这个文件夹，没有则会直接给出404页面，所以需要后端做相应的重写规则



首页

问答

综合

首页 > 正文

Vuejs动态路由匹配，为什么不能识别路由参数呢

H5W32021-05-05 17:56:01



如上图，想要实现两个菜单选项共用一个页面，通过路由参数来判断功能从而筛选显示不同的内容。

selectMenu:function(key, keyPath){

consolelog(key);

switch(key){

case '1':this$routerpush('/index');break;

case '2-1-1':this$routerpush({path:'/sale/sureList/0',name:'待确认订单'});break;

case '2-1-2':this$routerpush('/logistics/logisticsList/0');break;

case '2-1-3':this$routerpush({path:'/sale/sureList/',name:'订单管理'});break;

default:break;

上面是菜单控制函数，当我选择待确认菜单时，路由成功匹配到路由中的第一项，status =0。但实际上我在surListvue页面获取路由参数失败，报错：[vue-router] missing param for named route "待确认订单": Expected "status" to be defined

导致界面不能正确渲染，还是原来的确认订单界面，如下图所示（有点丑，为了实现效果）。标题的渲染是根据路由参数来判断显示的。



可耐的小伙伴们，求助求助！

///////////////////////////////////////////////////////////////////////////////////

下面是监听路由情况下打印输出的路由及路由参数



回答：

！！$routepus()使用错误

查看$routepush()用法，发现一般有下面的三种用法，而我原来写的那种路径加名字是不合法的。

试着使用第二种和第三种命名法:this$routerpush({name:'待确认订单',params:{status:'0'}})，成功了。：）要么只push路径path，要么push name和参数status确定路由。

(1)字符串

routerpush('home')

(2)// 对象

this$routerpush({path: '/loginurl=' + this$routepath});

(3)// 命名的路由,后面的参数为动态路由的参数

routerpush({ name: 'user', params: { userId: 123 }})

(4)// 带查询参数，变成/backend/orderselected=2

this$routerpush({path: '/backend/order', query: {selected: "2"}});

回答：

首先，selectMenu方法不建议在跳转路由的时候带有中文的name，或者说路由的定义不建议用中文

其次，你想用path:'/sale/sureList/'时，进入订单管理页，但是路由指向的是待确认订单的路由，并且提示status未定义，所以你可以这样定义路由试试

path: '/sale/sureList'

另外，我做过类似的页面，两个路由指向同一个页面，这个时候在进行页面的切换时，并不会重新挂载，所以获取路由名称方式用mounted方法和watch监听方法一起做。

watch: {

'$route': function (route) {

// 监听路由变化

consolelog("router changed");

let routerName = this$routename;

consolelog(routerName);

}

},

mounted(){

let routerName = this$routename;

consolelog(routerName);

///////////////////////////////////////

简单测试url传递参数输出params：

很多前端老铁通常在做PC端管理系统类的项目时，会使用vue-router和ElementUI中的el-menu结合的方式：

   router参数为引入的routerjs文件。在配置vue的路由时，采用 命名视图 。如下：

在router文件中引用上述配置：

一般情况下，使用这样的方式已经可以满足各种路由的要求。直接点击左侧menu边栏可实现路由的切换。但需要带query参数时，会出现问题：

当我们想要配置query参数时，官方推荐的方法为：

当我们的当前url为： >

Vue3表单对象固定写死的值可以使用v-model或者v-bind动态获取。首先，可以通过给v-model定义一个绑定值，并且通过定义一个data函数来获取表单中写死的值，然后将其赋值给v-model，这样就可以获取到表单中的固定写死的值了。其次，可以使用v-bind动态绑定表单中的固定值，v-bind可以在表单中绑定一个固定值，并且可以实时获取更新的值，这样就可以获取到表单中的固定写死的值了。

这个涉及到低层的原理，简单说就是异步！你如果知道异步那这个就不是问题，如果不知道那简单说下：就是你在数据处理时，下面的传参函数就已经执行了，此时，你的赋值函数还没有处理完，自然就没有值，你的传参函数和赋值函数两个是同时进行的，传参函数在没有拿到预期结果前就已经执行完毕了。

解决办法；异步的东西最好都放在一个函数里执行，或者在赋值函数里去调用外部的函数。监听无效

以上就是关于Vue---传参params 、query刷新页面参数会丢失全部的内容，包括:Vue---传参params 、query刷新页面参数会丢失、vue打包后出现空白，请求不到js数据问题---router 坑、vue动态路由引用组件在服务器上不能识别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！