路由基础

1.路由：路由是路径和组件的映射关系

2.作用：实现单页面应用程序的切换

3.优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高

4.缺点：首次加载页面会比较慢

路由的使用步骤

1.下包      yarn add vue-router
2.导入包    import VueRouter from 'vue-router'
3.安装插件  Vue.use(VueRouter)
4.创建路由规则数组 ` const routes = [ { 一个对象就是一个路由规则 } ] `
5.创建路由对象 ` const router = new VueRouter( { routers } )`
6.将路由对象注册到Vue实例中 ` new Vue( { router } ) `
7.使用router-view作为挂载点 ` <router-view> <router-view> `

声明式导航

1.声明式导航是 router-link组件

2.作用：

1.1：最终会渲染成a标签
1.2：to属性不加#，自动判断是否要添加
1.3：当被点击时自动添加两个类名： router-link-active、router-link-exact-active,用于导航栏的高亮

3.用法 <router-link to="不用加#直接写路径"> </router-link>

4.传参：

query传参：直接在url后面使用？拼接参数即可。然后用$route.query.参数名去接受传来的参数
params传参：1.路由规则中配置path:'/part/name'
            2.在路径直接传参即可
            3.$route.params.参数名接受传递来的参数

重定向和模式

重定向

1.匹配path后，强制跳转到path路径

1.1：网页打开url默认是hash值/路径，redirect是主要设置要重定向哪个路由路径

404页面处理

1.当找不到路径，需要给个提示页面 1.1路由最后，path匹配*(任意路径)-前面不匹配就命中最后这一个

路由模式

1.hash路由例如：http://localhost:8080/#home

2.history路由例如:http://localhost:8080/home(以后上线需要服务器端支持，否则找到的是文件夹)

3.使用：在创建路由对象时传入配置 new VueRouter( { routers,mode: 'history'} )

编程式导航

编程时跳转

1.使用js代码来进行页面跳转

2.语法：$router.push( { path:'路径'，name:'路由名称'} )

编程式传参

1.接受参数都是一样

2.注意：如果要用path跳转，会自动忽略params，推荐使用name+params 或 path+query传参搭配

路由嵌套和守卫

路由嵌套

1.在配置规则中添加 children属性

{path:'/find',conmponent:Find,children:[{ 规则 }]}

2.在父路由使用 router-view 占位

全局前置守卫

例如: 登陆状态去<我的音乐>页面, 未登录弹窗提示用户

1.作用：每次路由跳转之前会执行该守卫，，必须通过next()决定是否放行

2:语法：router.beforeEach((to,from,next)=>{ // 权限判断})

组件缓存

1.作用：由于频繁切换会导致性能浪费，缓存后可以不用重新创建或销毁

2.用法

<keep-alive>
    <router-view><router-view>
</keep-alive>

Vue-Router路由