vue3.0 router路由跳转传参问题(router.push)

import { useRouter } from 'vue-router'

const router = useRouter()

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

import { useRoute } from 'vue-router'

//query
let userId=route.query.userId;

//params
let userId=route.params.userId;

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

import VueRouter from "vue-router";

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

this.$router.push({path: 路径, query: 参数})

import { useRouter } from 'vue-router'
const router = useRouter();
router.push('/')

const routes: Array<RouteRecordRaw> = [
  {   
   path: '/',   
   name: 'supplier',    
   component: () => import(/* webpackChunkName: "body" */ '../views/supplier/index.vue') 
   meta: {
        icon: 'ion:grid-outline',
        title: '供应商',
        orderNo: 4,
      }, 
  }, 
  {
    path: '/login', 
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/user/login/index.vue')
     meta: {
        title: '登录',
      }, 
  }
];
exprot default routes

// 从vue-router中引入createRouter，以及模式
import {
  createRouter,
  createWebHashHistory
} from 'vue-router'
// 引入routes.ts文件
import routes from './routes.ts'
const router = createRouter({
  history: createWebHashHistory(), //createWebHashHistory是hash模式
  routes
});
 
export default router

// 在main.ts/js里面
import router from './router'
createApp(App).use(router).mount('#app')

//从vue中引入router
import { useRouter } from "vue-router";
const router = useRouter();
//router 包含router对象的内容；如下图
// 跳转我们可以使用 router.push()
// 不带参数，直接填写路径，写法
router.push('path路径') || router.push({path: "path路径"}) ||router.push({name: 'name名字'})
// 带参数
router.push({path: 'path路径', query: '参数'})
router.push({name: 'name名字', params: '参数'})

// 引入route
import { useRoute } from "vue-router";
const route = useRoute()
// route参数，如下图
// 如果对应params传递参数
route.params.参数值
// 如果使用query传参
route.query.参数

const WhiteList = ['/login']; // 配置白名单
router.beforeEach((to, from, next)=> {
  if (WhiteList.indexOf(to.fullPath) !== -1) { // 判断前往页面是都存在于白名单
    next()
  } else {
    if (localStorage.getItem('userInfo')) {// 判断用户是否d登录
      if (to.name) { // 判断是否存在路由的name名字，如果有则代表有路由表已经存在，name继续前往，反之，则不存在
        next()
      }
      else {// 当路由不存在，录取路由，动态添加路由表，
        let localRoutes: any = localStorage.getItem('routes');
        let recursionList = recursionParam(JSON.parse(localRoutes));
        for (let item of recursionList) {
          router.addRoute(item)
        }
        next({ ...to, replace: true })
      }
    } else {
      next('/login')
    }
  }
});