vue2 和 vue3 路由使用对比

路由跳转

(通过query)

//跳转

详情


//path可替换成name，写法如下：

详情

//js跳转
this.$router.push({
    path: '/detail', //path可替换成name
    query: { id:1 },
});

//跳转 同vue2

//js跳转
//需要先引入useRouter，执行useRouter()

router.push({
    path: '/detail',
    query: { id:1 }
});

路由跳转

(通过params)

//跳转

详情

//path可替换成name，写法如下：

详情

//js跳转
this.$router.push({
　　path: '/detail',//path可替换成name
　　params: {
　　　　id: 1,
　　},
});

//跳转 同vue2

//js跳转
//需要先引入useRouter，执行useRouter()
import { useRouter } from 'vue-router';

const router = useRouter();
router.push({
    path: '/detail', //path可替换成name
　　params:{
　　　　id:1
　　}

});

 获取路由参数

（通过query方式传递的）

const id = this.$route.query.id

const id = route.query.id

获取路由参数

（通过params方式传递的）

const id = this.$route.params.id

//需要先引入useRoute，执行useRoute()
import { useRoute } from 'vue-router';
const route = useRoute();

const id = route.params.id

$route:获取路由信息对象，只读；

$router:操作路由对象 ，只写。