路由传参 +$router与$route区别

深藏阁楼爱情的钟 2022-12-26 04:52 165阅读 0赞

# 路由传参 + r o u t e r 与 router与 router与route区别 #

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人

--------------------

### 文章目录 ###

*  路由传参 + r o u t e r 与 router与 router与route区别
 *  一、路由传参
 *   *  1.params方式
     *  2.query方式
 *  二、router与route区别
 *  三、路由导航的两种方法

# 一、路由传参 #

## 1.params方式 ##

//通过 url/参数 传参
    	<router-link :to="'/home/'+id">home</router-link>
        //通过params方式定义的参数需要在路由中指定
        { path: '/home/:id', component: Home},
        //参数--通过$route.params.id获取参数

## 2.query方式 ##

// 通过 url?name=xx&id=xx&sex=xx 传参
    	<router-link to="/news?id=10&name='abc'">test</router-link>
        //通过query方式定义的参数 不需要在路由中指定
      	{ path: '/news', name:'abc',component: News},
        //参数--通过$route.query.id 通过$route.query.name获取参数获取参数

# 二、router与route区别 #

1、$route对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

2、$router对象(路由实例)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

# 三、路由导航的两种方法 #

[路由导航的两种方法][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221120/a574d2a8b914484a99c740c8ceca9535.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221120/43dfc78915d242e9a7ebaca235838e60.png
[Link 1]: https://blog.csdn.net/qq_41555854/article/details/108531210