路由跳转传参

说到路由跳转及传参,我有几个问题:

1. 什么是编程式导航? 什么是声明式导航?

2. 路由传参有几种方式? 怎么写?

3. $route $router routes三者有什么区别?

理解:

1.1 编程式导航:

        通过给标签添加事件触发$router.push跳转路由

<div @click='Fn'>编程式导航</div>

Fn(){ this.$router.push('路由')}

<div @click=$router.push('路由')>编程式导航</div>

1.2 声明式导航

        利用router-link配合to属性实现点击切换路由

<router-link to="路由">声明式导航</router-link>

2 路由传参主要分为两种:params query

2.1 query

// 无参数

<router-link to=" 路由 "></router-link>

//有参数 (用 ? 来连接路由和参数  用 & 连接参数)

<router-link to=" 路由 ? 键=值 & 键=值 "></router-link>

//扩展

<router-link :to="{ path:'路由',query : { 键:值 , 键:值 } }"></router-link>

<router-link :to="{ name:'路由',query : { 键:值 , 键:值 } }"></router-link>

2.2 params

// 无参数

<router-link to=" 路由 "></router-link>

// 有参数 (用 / 来连接路由和参数)

<router-link to="/路由/值">信息</router-link>

//注意点:使用params配置path时 需要添加冒号(参数的数量必须和路由定义的自定义名一致)

//如: path: '/路由/:自定义名 '  (一个参数)

//如: path: '/路由/:自定义名1 / :自定义名2 '  (两个参数)

//扩展

<router-link to=" 路由 / 值 ? 键=值"></router-link> //混合传参

<router-link :to="{ path : ' 路由 / 值 ' }"></router-link>  //params不能与path共存

<router-link :to="{ name: ' 路由 ',query: { 键 : 值 },params: { 键 : 值} }"></router-link>  

//利用name混合传参

3. $route $router routes区别

3.1 $route

        $route是一个跳转的路由对象,每一个路由都会有一个$route对象,是一个局部的,可以获取对应的name,path,params,query

3.2 $router

        $router是一个VueRouter的一个对象通过Vue的到的一个router实例对象,是一个全局的

3.3 routes

        routes是vue-router路由实例的配置项,用来而皮脂多个路由