本帖最后由 下潜 于 2023-6-29 19:10 编辑
一、学习内容
什么是Vue Router?
Vue Router和v-if/v-show一样, 是用来==切换组件==的显示的
v-if/v-show是标记来切换(true/false)
Vue Router用哈希来切换 (#xxx)
比v-if/v-show强大的是Vue Router不仅仅能够切换组件的显示, 还能够在切换的时候传递参数
URL的组成：
URL由三部分组成：
资源类型、存放资源的主机域名、资源文件名
也可认为由4部分组成：
==协议、主机、端口、路径==。（很多时候端口都是隐藏的）
还可以认为由7部分组成：
协议，域名，端口，虚拟目录，文件名，锚，参数
URL的一般语法格式：(带方括号[]的为可选项)
==protocol :// hostname[:port] / path / ;parameters#fragment==
Vue Router使用
1 导入Vue Router
unpkg：是一个前端常用的公共CDN
2 定义路由规则（切换规则）
3 根据路由规则创建路由对象
4 将路径对象挂载到Vue实例中
5 用a标修改URL哈希值
6 通过<router-view>渲染匹配的组件
什么是router-link
通过a标签确实能设置URL的hash,但是这种方式并不专业
在Vue Router中提供了一个专门用于设置hash的标签 router-link
把原来的a换成router-link
router-link特点
默认情况下Vue会将router-link渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么
给router-link设置选中样式
控制台中查看router-link渲染出来是a，选中后会加入样式outer-link-active
默认情况下我们可以通过重写router-link-active类名来实现设置选中样式（控制台可见）
此方法修改系统类名，欠妥，有更优解放方案
重定向路由
进入后想显示默认页面，这时候需要重定向路由来实现。
官方文档：顶部指南--》重定向和别名
{ path: '被重定向值', redirect: '重定向之后的值' }
Vue Router传递参数
只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象
只要能拿到路由对象, 就可以通过路由对象拿到传递的参数
在控制台打印对象 vue.$route，通过他可以拿到参数
|
