说到路由跳转及传参,我有几个问题:
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路由实例的配置项,用来而皮脂多个路由