画布 1
vue router
  安装
    npm install vue-router
    要分版本安装 正确语句npm install vue-router@3.5.3
  引入
    引入路由组件
      import Vue from 'vue'
import VueRouter from 'vue-router'
    注册插件
      Vue.use(router) 注册插件
    定义路由
      const routes = [
{ path: '/foo', component: Foo },
]
    创建 router 实例
      const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
    创建和挂载根实例
      const app = new Vue({
router
}).$mount('#app')
  路由出口
    <router-view></router-view>
      可简写成 <router-view />
      路由匹配到的组件将渲染在这里
  路由跳转
    声明式导航
      <router-link ：to="{path:‘/login’, query:{ name : ‘login’ }}">点击跳转到login</router-link>
        注意：要v-bind绑定to,不绑定后面对象都会以字符串形式
里面不能使用a标签
    编程式的导航
      <button @click="gologin">点击跳转到login</button>
methods:{
gologin(){
this.$router.push(
{path:"/login", query:{ name : "login" }}
)
}
}
    前进后退(下一页，上一页)
      this.$router.go(n)
（编程式导航特有）
        n < 0，后退n页
        n = 0，刷新页面
        n > 0，前进n页
        n > 历史数量时，不跳转也不刷新，无操作
  路由传参
    <button @click="getcanshu">点击获取参数</button>
methods:{
// this.$route ， 当前页面信息(路由信息对象，包括path,params，query等)
let canshu = this.$route.query
}
    接收
      {{$route.query.参数名}}
  嵌套路由
    const routes = [
{
path: '/login',
component: () => import("@/view/login.vue"),
children: [
{ path: 'vue1', component: () => import("@/view/vue111.vue") }
]
},
]
      children: [
// 地址不写 ' / ' ，可以使用懒加载，需要添加<router-view></router-view>
// 访问地址 /login/vue1
{ path: 'vue1', component: () => import("@/view/vue111.vue") }
]
    一个是绝对地址 /
      后边就可以直接跟地址 不用加父级 login
    一个是相对地址 直接加上子级地址
      后边没次更换子页面 都是父级加载 后边子页面地址更换 /login/子地址
    只要放入子地址 就会被加入进去
  导航守卫
    全局前置守卫
      const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
判断是否要执行next（)//控制页面跳转
})
        path：地址
        to : 到哪里去 将要到达的页面
        from : 从哪里来 上一个页面
        next : 是否进行下一步
          next(false): 中断当前的导航
          next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址
当前的导航被中断，然后进行一个新的导航。
        可以通过判断语句来设置用户的登陆权限
    全局解析守卫
      router.beforeResolve((to, from, next) => {
// ...
})
    全局后置守卫
      router.afterEach((to, from) => {
// ...
})
        不会接受 next 函数也不会改变导航本身
    路由独享守卫
      routes: [
{
path: '/login',
component: Login,
beforeEnter: (to, from, next) => {
// ...
}
}
]
    组件内守卫
      beforeRouteEnter(to, from, next) {
// 在渲染该组件时执行
}
      beforeRouteUpdate(to, from, next) {
// 在当前路由改变，该组件被复用时调用
}
      beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
}
    导航守卫执行顺序：
      全局前置 => 路由独享 => 组件进入 => 解析守卫 => 导航后置守卫
    路由元信息
      meta:{...}
      可以是任何形式 字符串 数组 对象
      配合守卫来进行使用
    History模式
      const router = new VueRouter({
mode: 'history',
routes: [...]
})
        需要后端更改配置
      地址没有#号 ie兼容性低
      vue3默认
    hash模式
      带#号
      vue2默认
      兼容性高 不需要后端更改配置