关于vue中路由的跳转和参数传递,参数获取

目录

• vue中的路由讲三点
• html中通过指令完成路由跳转
• 第一种情况就是以path形式
• 第二种情况就是以路由对象Object的形式
• 最后谈谈$router和$route地区别
• 结论：没有任何关系

vue中的路由讲三点

第一点：

• 指令级别的路由和程序级别的路由router.push();

第二点：

• 通过query和params传递参数和path和name之间的关系。

第三点：

• $router和$route地区别

声明：由于路由和传参和参数获取密切结合，所以将他们混合在一起讲解，最后会附加一个实例。

html中通过指令完成路由跳转

第一种情况就是以path形式

登幽州台歌

第二种情况就是以路由对象Object的形式

router1

注意这里的name指的是具名路由，在路由列表中的配置如下

{ name: 'wuhan', path: '/wuhan', component: WuHan }

而WuHan则是这个路由要抵达的模板或者说页面，定义如下

const WuHan = {template: '
武昌， 汉口， 汉阳 --- {undefined{$route.query.city}}
'}

注意由于在中是通过query的形式区传递参数，所有在目的地页面中也只能采用query的形式获取参数。

也可以不采用query的方法，而采用params的形式传递参数

router3

那么在在路由列表中的path中必须带上params传递过来的参数，否则在目的页面中无法获取参数

{ name: 'wuhan', path: '/wuhan/:city',component: WuHan }

在目的页面中以params的形式获取参数对应的值

const WuHan = {template: '
武昌， 汉口， 汉阳 --- {undefined{$route.params.city}}
'}

注意事项：不可以在的路由对象中同时出现path和params，此时params作废。目的页面中获取不到参数。

推荐是name和params搭配，path和query搭配。最好时不用params而只是用query的形式传递参数以及获取参数，

因为采用params的方式传递参数，当你进入到目的页面后确实能够正确地获取参数,但是，当你刷新页面时，参数就会丢失。

所以推荐使用query地形式传递参数。

最后谈谈$router和$route地区别

结论：没有任何关系

$router地类型时VueRouter，整个项目只有一个VueRouter实例，使用$router是实现路由跳转的，$router.push()。

跳转成功后，抵达某一个页面，此时要获取从上一个页面传递过来的参数，此时使用$route。

或者是$route.query.city，或者是$route.params.city。也就是说，$router和$route作用在路由不同的阶段。

 



  
  
  

    
Hello App!
    

      
      
      
      登幽州台歌
      江雪
      西安
      雅典
      务虚笔记
 
      

      router1

      router2

      router3

    
    
    
    
  
  

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。