1、路由
路由指标记和资源的配对；路由器的作用，给终端分配标记。
2、前端路由
路径和组件的映射关系
3、组件分类
.vue文件分2类, 一个是页面组件, 一个是复用组件 ；vue文件本质无区别。
4、vue-router模块
本质是一个第三方包
路由环境下载步骤：
1、下载模板 npm i vue-router@3----vue2装这个，vue3装npm i vue-router@4
2、在main.js导入vue-router模板，" import Router(此名可以随便定义) from 'vue-router' "
3、在Vue安装/注册这个库，'Vue.use(Router)'，这里的Router和上面保持一致
4、创建一个实例，'const router=new Router({ 这里可以有配置对象 })'，这里的Router也和上面保持一致
5、挂载到new Vue 根实例上，'new Vue({ router , render:h=>h(App),}).$mount('#app')'
注意： new Vue里的router属性名是固定的，值为实例对象。
路由使用：
router-view为挂载点。
总步骤：
注意: 一切都要以url上hash值为准
5、声明式导航
注意： 虽然自带了类名，不过还是要自己设置样式。
5.1声明式导航-跳转传参
6、路由-重定向和模式
设置页面一进来默认进入某个页面。
6.1路由-404
6.2路由-模式设置
通过设置history，把#去掉，需要和后端一起配置。去掉#号就是好看些。
7、编程式导航
以js方式实现切换。
注意： 运用方式3的话也要在main.js里加上name属性，如：
7.1编程式导航-跳转传参
注意： 传参时是this.route。
7.2后退$router.back()
8、嵌套和守卫
8.1路由嵌套
注意： 二级路由path如果写了根路径'/'，那么to这里直接写成这样即可to="/ranking"，就不需要再加/find了。如果二级路由path如果写成''，那么to这里要写成这样to="/find"或to="/find/"
8.2全局前置守卫
什么是路由守卫?
路由在真正跳转前, 会执行的beforeEach函数,这个函数 就是路由守卫 。
to 目的地(去哪个页面), from 来源(从哪个页面来), next 放行回调函数
注意： 放行回调函数一定要写，不然一直不放行，页面就一直不显示。
// router 创建实例之后
// 可以往这个 router 路由实例添加导航守卫(路由守卫)
// 全局前置, 所有页面跳转之前都会经过
router.beforeEach((to, from, next)=>{
console.log('到达了导航守卫');
// 拦住了必须放行, 默认这个函数可以接收到三个参数
// to 目的地, from 来源, next 放行回调函数
console.log(to);
console.log(from);
// 如果你来到了我的音乐但是有没有token就要跳转到登录页
if (to.path === '/my' && !localStorage.getItem('token')) {
// 这个 next 可以再里面带上 path 进行跳转
next('/login')
}else {
next()
}
})
9、样式穿透
10、路由使用案例(重要)
// 配置路由
// 1、引入
import VueRouter from "vue-router"
import Vue from "vue"
// 2、注册两个全局组件，router-link和router-view
Vue.use(VueRouter)
// 3、创建路由规则
// import .. from ... 这种方式引入组件，一次引入了多少个组件，那么就一次性加载多少个组件
const routes = [
{
path: "/",
// 重定向，表示当用户直接访问localhost:8080的时候强制跳转到登录页面。
redirect: "/login"
},
{
path: "/login",
// 按需引入组件，也就是当用户访问到login页面的时候才加载login.vue组件
component: ()=>import("../views/login.vue")
//注意：箭头函数引入vue组件比import .. from ...,component:..引入组件性能好。
},
{
path: "/register",
component: ()=>import("@/views/register.vue")
},
{
path: "/personal",
component: ()=>import("@/views/personal.vue")
}
]
// 4、根据路由规则生成路由对象
const router = new VueRouter({
// routes: routes 注意：键名routes不能修改，键值routes可以修改，
// 但是我们一般取一样的名字，方便使用简写。
routes
})
// 5、导出 路由对象(封装路由时要这一步)
//export default router
new Vue({
// 6、路由对象注入到vue实例中
//注意：键名router不能修改，键值router可以修改，
router,
render: h => h(App),
}).$mount('#app')
//7、在App.vue中过载
<template>
<div>
<router-view></router-view>
</div>
</template>
11、poster指令
作用：给视频加上封面。
语法：:poster="图片url"
12、indexOf() 方法
作用： 可返回某个指定的字符串值在字符串中首次出现的位置，也可以用在数组上。
语法： stringObject.indexOf(searchvalue,fromindex)
说明：该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检索的位置在字符串的 fromindex 处或字符串的开头（没有指定 fromindex 时）。如果找到一个 searchvalue，则返回 searchvalue 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：
13、路由元信息(meta)
route对象里面的属性，值为对象。
