前端（vue）学习笔记（CLASS 6）：路由进阶
1、路由的封装抽离
将之前写在main.js文件中的路由配置与规则抽离出来，放置在router/index.js文件中，再将其导入回main.js文件中，即可实现路由的封装抽离
例如
//index.js
import { createMemoryHistory, createRouter } from 'vue-router'import HisPage from '../views/HisPage.vue'
import MyPage from '../views/MyPage.vue'const routes = [{ path: '/his', component: HisPage },{ path: '/my', component: MyPage },
]const router = createRouter({history: createMemoryHistory(),routes,
})export default router在main.js内部引入
import router from './router/index.js'同样在vue对象中进行注入即可
2、声明式导航-导航链接
Vue-router提供了一个全局组件router-link（取代a标签）
属性变成to，且无需#
1、能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
2、能高亮，默认就会提供高亮类名，可以直接设置高亮样式
* 两个类名
说明：router-link自动给当前导航添加了两个高亮类名
1、router-link-active 模糊匹配（用的多）
to=“/my” 可以匹配 /my /my/a /my/b ...
2、router-link-exact-active 精确匹配
to="/my" 仅可以匹配 /my
说明：router-link的两个高亮类名太长了
在router的配置项中加上
linkActiveClass:"类名1"
linkExactActiveClass:"类名2"可以通过配置项定制类名
* 跳转传参
在跳转路由时，进行传值
1、查询参数传参
语法格式如下
to="/path?参数名=值[&参数名=值]
对应页面组件接收传递过来的值
$route.query.参数名
2、动态路由传参
配置动态路由
router: [...,{path: '/.../:参数名',component: ...}
]配置导航链接
to="/path/参数值"
对应页面组件接收传递过来的值
$route.params.参数名
注：/path/:参数名表示，必须要传参数。如果不传参数也希望匹配，可以加个可选符“?”
* vue路由-重定向
问题：网页打开，url默认是/路径，未匹配到组件时，会出现空白
说明：重定向 -> 匹配path后，强制跳转path路径
语法： {path: 匹配路径，redirect: 重定向的路径}
* vue路由-404
作用：当路径找不到匹配时，给个提示页面
位置：配在路由最后
语法：path：“*”（任意路径）-前面不匹配就命中最后这个
* vue路由-模式设置
问题：路由的路径看起来不自然，有#，能否切成真正路径形式
hash路由（默认） 例如：http://localhost:8080/#/home
history路由（常用） 例如：http://localhost:8080/home（以后上线需要服务器端支持）
const router = new VueRouter({routes,mode: "history"
})3、编程式导航-基本跳转
问题：点击按钮跳转如何实现
编程式导航：用js代码来进行跳转
两种语法：
1、path路径跳转（简易方便）
this.$router.push('路由路径')this.$router.push({path:'路由路径'
})2、name命令路由跳转(适合path路径长的场景）
this.$router.push({name: '路由名'
}){name: '路由名', path: '/path', component: XXX}* 编程式导航-路由传参
问题：点击搜索按钮时，跳转需要传参如何实现
1、path路径跳转传参（query传参）
this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2)this.$router.push({path:'/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})并且使用$route.query.参数名进行获取
2、path路径跳转传参（动态路由传参）
this.$router.push('/路径/参数值')this.$router.push({path: '/路径/参数值'
})3、name命名路由跳转传参（query传参）
this.$router.push({name:'路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}
})4、name命名路由跳转传参（动态路由传参）
this.$router.push({name:'路由名字',params: {参数名1: '参数值1',参数名2: '参数值2'}
})同样理由$route.params.参数名进行获取