router

//路由index.js
// 一、功能：封装一个路由配置，将来在main.js中使用
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 引入一个页面级组件
import HomeView from '路径' 
 
 //二 用户访问一个地址  vue-router模块会根据操作区路由模块匹配相应的页面级组件，把匹配到的组件显示到一个容器里面去。容器在哪?
const routes = [
//1. 用的上面（import HomeView from '路径' ）
  {
    path: '/',  // 路由的路径  不能重复
    name: 'home',  // 路由的名称
    component: HomeView  // 当前路由对应的页面级组件，将来匹配的路由所对应的页面级组件显示给用户。显示到<router-view />
  },
 //2. 路径第二种
  {
    path: '/about',
    name: 'about',
    // 异步组件：异步导入一个组件，异步加载一个组件。特点：异步，非阻塞，体验好
    // 异步导入组件/组件懒加载：https://blog.csdn.net/yorcentroll/article/details/122679683
    component: () => {
      return import('路径');
    }
 ]
 
 
 //三 创建一个路由实例
const router = createRouter({
  // 路由模式
  // history: createWebHistory(),  // history模式  
  history: createWebHashHistory(),  // hash模式   hash搜索引擎收录不方便 不利于推广  使用场景：后台管理系统
  // routes: routes
  routes
})

  // 页面级组件的跳转适用views    components(v-if)
 //1. this.$router.push(`path?id=${参数}`);
 //2. query是参数对像 
 this.$router.push({
                path: './',
                query: {
                id: id,
                age: 1,
                sex: '男'
                }
            })

 //子件获取
 console.log(this.$route.query)

对路由发起监听

watch:{
        $route(to,from){
            console.log(to,from);
            console.log(this.$route.query);
            this.getlist3();
        },
        // $router:{
        //     handler:function(val,oldVal){
        //         console.log(val,oldVal);
        //     },
        //     deep:true
        // }
    },