前端基础之《Vue（18）—路由知识点》

一、两种路由模式

1、hash路由
（1）url中有#号，背后是监听onhashchange事件
（2）hash路由部署上线不会出现404问题，背后是基于history api实现的

2、history路由
（1）url中没有#号
（2）history路由部署上线会出现404问题，要用服务器做重定向处理

二、两个全局组件

1、<route-view>
视图容器

属性：
name：用于指定命名视图（给route-view加个名字，默认叫default）

路由规则：

<router-view name='alive'></router-view>

比如当url='/home'时，路由系统加载HomePage组件，将其显示在一个name=alive的视图容器中

routes: [{ path: '/home', components: {// 左key是视图容器的名称，右边是组件名称alive: HomePage}}]

2、<route-link>
相当于a标签，用于设计菜单导航

属性：
to：用于指定跳转的目标
tag：用于指定最终渲染成什么标签，默认是a标签
active-class：用于指定菜单高亮样式显示
replace：跳转时，用当前链接替换路由栈栈顶
exact、exact-active-class：路由精确匹配

字符串写法：
<route-link to='/home'>首页</route-link>
对象写法：
<route-link :to='{path:"/home"}'>首页</route-link>

3、什么是路由栈
浏览器向左向右的箭头，控制页面访问，比如依次访问：
/
/home
/user
路由栈是['/', '/home', '/user']，这时候选择向左箭头，则跳转回到/home