vuerouter.query如何获取含有特殊字符的参数

1 可以通过encodeURIComponent方法进行编码处理后获取含有特殊字符的参数。

2 因为特殊字符在URL中需要进行编码处理，否则会出现意外的结果或错误的解析。

3 例如，如果获取参数name中含有特殊字符的值，可以使用vuerouterquery获取参数后再使用decodeURIComponent方法进行解码处理，代码示例如下：const name = this$routequeryname // 获取参数

const decodedName = decodeURIComponent(name) // 解码处理含有特殊字符的值这样就可以正确地获取含有特殊字符的参数值了。



首页

问答

综合

首页 > 正文

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：

1、第一种方法：拼接方式:

methods：{

handleClick(id) {//直接调用$routerpush 实现携带参数的跳转

 this$routerpush({path: `/detail/${id}`,})

}

对应路由配置：

{

path:'/detail/:id',

name:'detail',

component: detail

} 获取参数方式： this$routeparamsid

2、第二种方法：params传参 （通过路由属性中的name来确定匹配的路由，通过params来传递参数。）

methods：{

handleClick(id) {

this$routerpush({name:'detail', // 根据name确定匹配路由params: {id: id}})

}

//或者采用router-link前往Detail页面

<router-link :to="{name: 'detail', params: { id: 1 }}">前往Detail页面</router-link>

对应路由配置：

{

path:'/detail/:id',

name:'detail',

component: detail

}  获取参数方式： this$routeparamsid

三、第三种方法：query传参

使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url后面id=？

methods：{

handleClick(id) {

this$routerpush({path:'/detail',query: {id: id}})

}

对应路由配置：

{

path:'/detail',

name:'detail',

component: detail

}  //获取参数：this$routequeryid

四、总结：params和query中的区别

1、接收方式

query传参：this$routequeryid

params传参：this$routeparamsid

2、路由展现方式

query传参：/detailid=1&user=123&identity=1&更多参数

params传参：/detail/123

我不知道你是在哪里查看 $routeParams 的，我猜是在 resolve: 那里吧？这就是原因。请仔细阅读$routeParams 的文档，不长，10 分钟就读完了。帮你总结一句话：

Note that the $routeParams are only updated after a route change completes successfully This means that you cannot rely on $routeParams being correct in route resolve functions

然后你可以再看看文档里的这个例子，注意这个例子里模拟了异步的延迟，于是当你切换 routes 的时候，仔细观察$routecurrentparams 和 $routeParams 的变化顺序；另外看清楚这个例子是在哪里去获取 $routeParams的。

要学会看文档呀～

$route获取的是当前url地址的信息，通过$route可以拿到的数据包括

fullPath: "/Namevue/test"   

router: ""     //路由规则所属的路由器

name: "Namevue"    //当前路径的名字，如果没有使用具名路径，则名字为空

params: {id: "test"}    //路由中的定义的动态片段和全匹配片段的键值对

path: "/Namevue/test"    //当前路由对象的路径，会被解析为绝对路径，如 "/home/news"

query: {}   //路由中查询参数的键值对。例如，对于 /home/01favorite=yes ，会得到$routequeryfavorite == ‘yes‘ 。

<p>当前路径：{{$routepath}}</p>

<p>当前参数：{{$routeparams | json}}</p>

<p>路由名称：{{$routename}}</p>

<p>路由查询参数：{{$routequery | json}}</p>

<p>路由匹配项：{{$routematched | json}}</p>

query查询跳转使用方法有2种

1、在router-link直接使用   <router-link :to="{path:'/HelloWorld',query:{name:'linlin',age:'3'}}"> HelloWorld</router-link>

2、在点击事件调用方法使用

handlclick(){

       this$routerpush({

         path:"/HelloWorld",

         query:{

           name:"lili",

           age:'31'

         } });

router不重新加载数据是路由是相同的原因，项目中经常会用到同一个页面，结构是相同的，我只是在vue-router中通过添加参数的方式来区分状态，参数可以在页面跳转时带上params，或者query，但是有一个问题，即使我们修改了参数，URL也显示已经改变，但页面并不会刷新，因为路由是相同的，vue就会认为你是同一个页面，从而复用已加载的页面，而不会重新加载，所以如果在created钩子中来区分状态明显是行不通的，可以通过watch监听事件来监听路由的变化。

首先在appvue里面有这么一段 然后你所点击的按钮其实是这个东西，这个其实就是个封装完的a标签 你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了

以上就是关于vuerouter.query如何获取含有特殊字符的参数全部的内容，包括:vuerouter.query如何获取含有特殊字符的参数、vue动态路由引用组件在服务器上不能识别、Vue Router路由传参三种方法及区别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！