vue-router

    任何 子路由 都是在其 父路由 的组件中 切换 显示，
    不管是多少层的路由嵌套，都是这样的理解，
    所以父路由需要有以下两点，二者缺一不可
    1 有组件引用
    2 组件中有router-view组件

    App.vue 是所有组件的父组件，
    一级路由相当于 App 的子路由
    所有一级路由在App.vue中切换显示
    App.vue 中的 router-view  对应 routes 中 一级路由 位置
    /   默认显示    其他切换 显示

    Layout.vue 是二级路由的父组件，
    所有  二级路  在 Layout.vue中切换显示
    Layout.vue 中的 router-view  对应 routes--Layout 中 children路由 位置
    /   默认显示    其他切换 显示

    传递参数
    name 方式 需要 添加  name配置项
    query传参 三种写法
    路由中  需要 去掉 /:id  否则会报错  path:'/home',
    <router-link :to="{name:'home',query:{id:1}}" />

    第一种：this.$router.push({name:'home',query:{id:1,age:2}})
    第二种：this.$router.push({path:'/home',query:{id:1,age:2}})
    第三种：this.$router.push(`/home?id=1`);
    取参 this.$route.query.id
    query类似 get，跳转之后页面url后面会拼接参数，类似?id=1，

    params只能和name一起用哟  路由中 需要配置 name
    路由中  需要 加上 /:id
    1 this.$router.push({name:'home',params:{id:1,age:2}})
    2 this.$router.push(`/home/id=1`);
    //路由配置：
       {
	       path:'/home/:id/:age',
         name:'home',
	       component:W
       }
     取参 this.$route.params.id
    params类似post，跳转之后页面url后面不会拼接参数


    const router = createRouter({
  // 使用哈希路由模式
  history: createWebHashHistory(),
  // 路由配置
  routes,
  // 滚动行为
  scrollBehavior (to, from, savedPosition) {
     // vue2  x  y
    // 始终滚动到顶部
    return { top: 0 }
  }
})


使用location.href=’/url’来跳转，简单方便，但是刷新了页面；

使用history.pushState(’/url’)，无刷新页面，静态跳转；
引进router，然后使用router.push(’/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，
尤其是在history模式下


useRouter() undefined
useRouter执行一定要放在setup方法内的顶部或者其他位置，
不能放在下面setup的函数里面执行，
否则作用域改变useRouter执行是undefined

vue 子路由  路径写/和不写/的差别
子路由写/的时候代表是绝对路径 跳转的时候直接在 跟路径 下跟上子路由
不写/的时候 会进行拼接 在原有路径上跟上新的path路径

因此  子路由  默认路由可以 写 '' 默认拼接 父路由  跟 '/father' 同理
父  '/'              '/father'
子  '/' ''           '/father'  ''
                 '/father/callback'  'callback'

链接激活时使用的 CSS 类名

根据当前路由 来匹配 是否 active
exact-active-class="active"精准匹配
路由是 /member  只有 /member 的 a 标签才可以 有active class
也可以 less 中 .router-link-exact-active{}

active-class="active"  当前路由开头即可--激活自身 和 上一级
路由是 /member   /member开头的  的 a 标签才都可以 有active class
比如 当前路由是 /member  /(上一级)  也会  /member/xxx  不会
也可以 less 中 .router-link-active{}

如果比较多  可以在 router--index 中  配置   统一修改
linkActiveClass       :   'active'
linkExactActiveClass  :   'active'

重点 ***********************************
active-class  模糊匹配 可以匹配自身路由规则 以及其上一级
/member   /member  /  都可以    vue2中
vue3 中   要求 路由也必须是 嵌套关系 才可以
/member/order
/member/order/123
可以写平级关系 to 跳转即可   但是  不是嵌套  模糊匹配不生效 无法 激活 CSS
所以 做成嵌套关系
/member/order--> 写组件 但是因为有子路由 组件中还需要放置  router-view
但其 仅仅就是一个容器  可以直接通过 render 函数  生成 router-view
这样就无需指定 组件  以及组件中 router-view
{ path: '/member/order', component: {render:()=>{h(<RouterView/>)}} },

children: [
  { path: '', component: MemberHome },           主页
  { path: ':id', component: MemberDetail },   详情页
]
形成嵌套关系   访问 /member/order/123   模糊匹配 /member/order  也可激活 CSS


asp/jsp/php  后端开发页面  后端路由

vue-router
默认class
1 默认 router-link-active
      .router-link-active{ }
  修改 <router-link active-class='xxx'>
  全局修改
  linkActiveClass=''
  linkExactActiveClass=''
  .xxx{ }

 当前路由 /home/goods
 <router-link to='/home' exact-active-class='xxx' />
 /home              router-link-active
 <router-link to='/home/goods' />
 /home/goods        router-link-active   router-link-exact-active

懒加载 component:()=>import('xxxx')
dist 分包 但是没有名字   chunk-hash.js
魔法注释 -- 加名字 --    home-chunk-hash.js
*/
// component:()=>import(/* webpackChunkName: "home-chunk" */ 'xxxx')


路由匹配

一般来说，我们把404路由定义在最后

  {
    path: '/:pathMatch(.*)*',
    name: 'notFound',
    component: () => import('./views/404'),
  },

  进入没定义过的路由，我们都会给他显示404页面

  http://localhost/:8081/Ling
  http://localhost/:8081/Ling/ha

  pathMatch(.*) 为 string
  route.params.pathMatch === 'Ling/ha'

  pathMatch(.*)*--route.params.pathMatch为数组
  route.params.pathMatch ====['ling'] ['ling','ha']

  以特定字符串开头的路由匹配

  {
    path: '/member:id(.*)',
    component: () => import('./views/member'),
    name: 'member',
  },

  http://localhost:8081/member

  http://localhost:8081/member01 -- route.params.id  01


  <router-link to='/home' v-slot="{ href,route,navigate,isActive,isExactActive }" custom>
    <div>
  </router-link>
  移除 tag='div'
  其他元素 或者 组件以插槽的形式 插入  外面包裹 a
  作用域插槽 传递过来的 属性
  href url
  route route
  navigate  导航函数
  isActive,isExactActive  boolean 是否匹配  精准匹配
  custom 添加后  外层 a 去掉  点击无法 跳转 可以 使用 οnclick='navigate' 实现


 router-view
 作用域插槽   缓存  与  动画
 		<router-view v-slot="{ Component }">
			<keep-alive>                             or transition
				<component :is="Component" />
			</keep-alive>
		</router-view>

添加路由
1 直接添加
 router.addRoute({})
2 添加子路由    name--father
  router.addRoute('name',{})
删除路由
1 添加 name 相同的  替换
2 router.removeRoute('name')
3 const remove = router.addRoute('name')
  remove() 删除路由
router.hasRoute()   boolean
router.getRoutes()  []


router.beforeEach((to, from) => {
  无 next
  1 return     false  不导航
  2 return     undefined 或者 不写   原计划 导航  next()
  3 return     ‘/home’
  4 return     { path:'/home' }
})

数据改变是 同步代码  for (i=0; i<100; i++) { counter.value ++ }
watch
nextTick
等 是 微任务  等 数据同步完成  最后 微任务 执行一次回调即可


history 后端 nginx  解决 刷新 携带数据问题
nginx 配置  try_files /index.html   xxxx/home 找不到 最后返回  index.html

location / {
  root   /user/local/docker/web/gzfsweb/;
  #  vue router history 模式
  try_files $uri $uri/ /index.html;
  index index.html index.htm;
}