【vue】路由导航

一、路由导航

1、声明式导航

主要通过<router-link to='/home'></router-link>实现

<router-link to='/home'></router-link>               // 简写，字符串path
<router-link :to="{ path: '/home'}"></router-link>   // 对象path
<router-link :to="{ name: 'home'}"></router-link>    // 对象name

2、编程式导航

router.push('/home')      // 向history栈添加一条新记录，点击浏览器后退按钮，回到之前的URL
router.replace('/home')   // 替换当前的history记录
router.go(n)              // n为整数，控制history记录中向前或者后退多少步

二、路由传参

1、分类

（1）query方式传参

参数会路径中展示，位于？的后面，以&连接多个参数

（2）params方式传参

参数可在路径中展示，也可不在路径中展示， 取决于配置路由path路径的方式

2、声明式导航的传参方式

<router-link to='/home?id=7'></router-link>
<router-link to='/home/7'></router-link>
<router-link :to='{ path: '/home', query: {id: 7} }'></router-link>   // query方式
<router-link :to='{ name: 'home', params: {id: 7} }'></router-link>   // params方式

3、编程式导航

router.push('/home')                             // 直接用path字符串
router.push({ path: 'home', query: {id: 7} })    // query方式
router.push({ name: 'home', params: {id: 7} })   // params方式

4、参数使用

route 对象上有常用属性
route.path            // path
route.name            // 路由名称name
route.query.id        // query参数
route.params.id       // params参数

注： 传递的参数，会被转换为字符串，使用参数的时，注意数据的类型

5、传参方式区别

（1）展示的方式不同

query参数位于？的后面；

params参数则可展示可不展示，取决于路由的配置方式

（2）重新刷新页面效果可能不同。

携带query参数，刷新页面，页面效果不变。

携带params参数，刷新页面，如果path使用动态参数，页面效果不变；如果path未使用动态参数，则刷新页面，页面由于params参数缺失，可能会有不同程度的影响

三、例

router.push({ name: 'createTemplate', params: {mode: 'add'} })

如果路由配置中，path未使用动态参数，如下配置方式  

{
  path: 'createTemplate',
  name: 'createTemplate',
  component: () => import('@/components/CreateTemplate'),
},

则params参数不会在路径中展示，重新刷新页面，params参数会丢失，可能会造成不同程度的影响

如果路由配置中，path使用动态参数，则params参数可展示在路径中，如下配置方式  

{
  path: 'createTemplate/:mode',
  name: 'createTemplate',
  prop: true,
  component: () => import('@/components/CreateTemplate'),
},

则params参数会在路径中展示，重新刷新页面，页面效果不变。

此时推荐通过 prop: true 的方式解耦，提高组件的使用的灵活性