摆烂日记之

1，vue路由

路由是根据映射关系，分发用户请求到不同的业务模块，执行业务流程的过程

2，vue路由下载

npm i vue-router@3 -S

下载三版本的路由。4版本的路由和vue2存在兼容性问题

3，配置vue路由

import Vue from "vue"
import VueRouter from "vue-router"
//引入依赖
Vue.use(VueRouter)
//挂载插件

import 名字 from  路径
//把需要挂载的组件都引入进来

let routes=[
    {
        path:'url',
        component:组件名
        
}
//引入多个 格式同上
//path是配置访问的路径
//component是URL要访问的组件名
]
//创建的映射规则

let router=({
    routes //创建路由对象  ，就上上面创建的映射规则
})
export default router  //路由导出

因为是vue脚手架创建的项目

src/main.js添加路由对象

把如上代码块 配置的引入进去。并且写在vue实例里面

end。。。。。。。在显示的页面加上如下标签即可

<router-view></router-view>

4，路由导航

<router-link></router-link>

如上标签里加上  to属性  即 超链接的href作用一样  

5，导航的高亮

默认直接在写样式写在 .router-link-active里

其次自定义    在配置路由文件里  创建路由对象里加一个

linkActiveClass 属性 值为自己自定义  然后就可   .自定义来配置导航的高亮

6,严格匹配

在路由导航里 路径包含的情况下 就会出现小瑕疵

解决方法：在可能存在问题的标签里 加上exact属性 

7,路由别名

在配置文件里映射规则里，加上上 alias 属性 值为路由别名 别名可以访问到 path里的也可以访问到

8，路由重定向

在配置文件映射规则里，去掉component属性 加上 redirect 后面跟重定向的路径

9，两种匹配模式

是在配置文件，路有实例里的，默认值是mode:hash 这个模式 url里有#， history模式没有。