Vue3学习——路由prop配置、replace

写法一

在路由中可直接写prop: true，即可在页面中defineProps使用

• 相当于（<Detail id=“1” name==“2” />）,但只能是params

{
    path: '/service',
    name: '服务',
    component: () => import('../views/Service/index')，
    props: true
  },

写法二（query写法）

{
    path: '/service',
    name: '服务',
    component: () => import('../views/Service/index')，
    props(route) {
    	return route.query
    }
  },

页面

defineProps(['id', 'name']) // 即可使用

写法三（只能固定写死）

{
    path: '/service',
    name: '服务',
    component: () => import('../views/Service/index')，
    props() {
    	return {
    		x: 1,
    		y: 2,
    		z: 3
    	}
    }
  },

replace

<RouterLink replace to="/home" active-class='active'>首页</RouterLink>

编程式路由导航

在vue2中重复跳转会报错，但vue3不会报错

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

params不能与path搭配使用

重定向 redirect