npm i -S vue-router@4

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
export const asyncRoutes: Array<RouteRecordRaw> = [
  {
    path: "/",
    //重定向到活动界面
    redirect: "/activity",
    meta:{
          title:'首页',//配置title
          keepAlive:false,//是否缓存
          requireAuth:false//是否需要身份验证
        }

  },
  //活动中心
  {
    path: "/activity",
    name: "activity",
    //路由懒加载
    component: () => import("@/views/activity/Activity.vue"),
  },
  //通过ID进入藏品详细
  {
    path: "/collectionDetails/:id",
    name: "collectionDetails",
    component: () => import("@/views/collection-details/CollectionDetails.vue"),
  },
];

const router = createRouter({
  // 始终滚动到顶部
  scrollBehavior() {
    return { top: 0 };
  },
  history: createWebHashHistory(),
//设置路由前缀，默认为空
// history: createWebHashHistory("/cs"),
  routes: asyncRoutes,
});
export default router;

import { createApp } from 'vue'
import router from "./router/index";

const app = createApp(App)
app.use(router)
app.mount('#app')

<template>
  <div class="main">
    <router-view></router-view>
  </div>
</template>

import { useRouter } from "vue-router";
const router = useRouter();
//不带参数
router.push("/");
//路由query传参,参数拼接到url上，刷新不会丢失
router.push({
    path: "/",
    query: {
      name:"小龙"
    },
});
//路由params传参,注意params不能和path同时使用，要用params与name使用，刷新参数会丢失
router.push({
    name: "/",
    params: {
      name:"小龙"
    },
});

//路由params传参,注意params不能和path同时使用，要用params与name使用，刷新参数会丢失
router.push({
    path: "/:name"
});

import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.query.name);//小龙
console.log(route.params.name);//小龙
console.log(route.params.name);//小龙

import { useRoute } from "vue-router";
const route = useRoute();
console.log(window.location.href);//完整url
console.log(route.path);//路径

route.replace({path:'/name',query:{id:1}});

window.history.pushState(state, title[, url])   //添加并激活一个历史记录条目 

// 如果当前的域名是 www.baidu.com
const state = { name: 'dx', age: 18 }
const title = ''
const url = '/about'

const result = history.pushState(state, title, url)
// 路由将会改变为www.baidu.com/about

window.history.replaceState(state, title[, url]);

window.addEventListener('popstate', function (e) {
    console.log(e.state)
},false)

const state1 = { name: 'dx', age: 18 }
const title = ''
const url = '/about'

history.pushState(state1, title, url)

history.back()
// 先后退到之前的路由，会打印一次state,但此时的路由没有通过pushState或者replaceState设置state,所以
// null
history.forward()
// 再次回到about路由时，又会打印一次state
// { name: 'dx', age: 18 }

  {
    path: "/",
    //访问'/'，重定向到'/activity'
    redirect: "/activity",
  },

  {
    path: "/:pathMatch(.*)",
    redirect: "/404",
  },

// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是个函数，表示放行 next() 放行  next('/login') 跳转登录页面
router.beforeEach((to, from, next) => {
  //设置浏览器标签页的标题
  if (typeof to.meta.title === "string") {
    document.title = to.meta.title;
  }

  // 如果用户访问的登录页，直接放行
  if (to.path === "/login") return next();

  //访问用户页面,兑换藏品
  if (to.path === "/user") {
    // 从 localStorage 中获取到保存的 token 值
    const { token = "", idCardStatus } = storage.getItem("loginInfo") || {};
    // 没有 token，强制跳转到登录页
    if (!token) return next("/login");
    //没有实名认证
    if (idCardStatus === 0) return next("/realName");
    next();
  }
  next();
});

Routers.beforeEach((to,from,next) => {
    if(to.path != '/' && !store.state.isLogin) {
        //跳转的不是首页 同时 用户还未登陆
        //这个判断，我们就可以基本判定用户是在做登陆时候的跳转
        //↓拿到登陆时，接口返回的路由数组（vuex内）,大致是这样的
        let resRouterArr = [
            {
                routeName: '人员管理',
                children: [
                    {
                        routeName: '销售管理',
                        ...
                    },
                    {
                        routeName: '内勤管理',
                        ...
                    }
                ]
            }
        ]
        let routerArr = []
        resRouterArr.forEach(item => {
            allRouters.forEach(all => {
                if(item.routeName == all.routeName) {
                    //拿到本地路由对象
                    let obj = JSON.parse(JSON.stringify(all))
                    let childrenRouter = []
                    if(item.children && item.children.length > 0) {
                        item.children.forEach(childItem => {
                            all.children.forEach(allItem => {
                                if(childItem.routeName == allItem.routerName) {
                                    childrenRouter.push(allItem)
                                }
                            })
                        })
                        obj.children = childrenRouter
                    }
                    routerArr.push(obj)
                }
            })
        })
        Routers.addroutes(routerArr)//addroutes为添加路由数组的方法
        store.commit('domRouteTree',rousterArr)//存储进vuex，之后页面左右路由列表渲染使用
        next({...to,replace:true})//进行路由跳转
    } else {
        next()
    }
})

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)

// Replace -> app.mount('#app')
router.isReady().then(() => {
    app.mount('#app')
})

    // 当参数更改时获取用户信息
    watch(
      () => route.params.id,
      async newId => {
        userData.value = await fetchUser(newId)
      }
    )