画布 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/子地址
    只要放入子地址 就会被加入进去