前言

本文所采用技术栈：vue3+vue-router4+vuex4+vant3，我们在开发项目的时候，页面之间的跳转、传参，这些都是不可缺少的，在vue-cli3.0中，是vue-router也就是路由来实现的，今天就带来我们在项目中最常用的一些路由用法。

1、路由文件配置，在使用脚手架创建一个新的项目后，在项目根目录下的：src\router\index.js，会生成一个路由配置文件，在这里，我们的每一个页面，都需要在这里配置，然后才可以使用路由进行跳转。

1.1 打开index.js，添加个直播页面

{
  path:'/live',
  name:'Live',component:()=>import(/* webpackChunkName: "live" */'../views/Live.vue')},

1.2 添加个商品详情页面

{
  path:'/gooddetail/:id',
  name:'Gooddetail',component:()=>import(/* webpackChunkName: "gooddetail" */'../views/gooddetail.vue')},

这里我们在path里加入了一个id的参数，我们可以通过id来传商品ID

1.3 添加个确认订单页面

{
  path:'/confirmorder/:id/:ids/:amount',
  name:'Confirmorder',component:()=>import(/* webpackChunkName: "gooddetail" */'../views/confirmorder.vue')},

这里我们在path里加入了三个参数，分别是/商品ID/商品属性ID/商品数量

2 、配置完路由文件，编写完页面代码，接下来是如何使用了

2.1 从首页跳转到直播页，代码如下

<script>import{onMounted}from"vue";import{useRouter}from'vue-router';exportdefault{
  name:'Home',
  components:{},setup(){const router=useRouter();constgoLive=()=>{
      router.push(`/live`);}return{
      goLive}}}</script>

然后在页面元素上使用@click=“goLive”，跳转到直播页面。

2.2 从首页跳转到商品详情页

<script>import{onMounted}from"vue";import{useRouter}from'vue-router';exportdefault{
  name:'Home',
  components:{},setup(){const router=useRouter();constgoDetail=(id)=>{
      router.push(`/detail/${id}`);}return{
      goDetail}}</script>

然后在页面元素上使用@click=“goDetail(id)”，跳转到商品详情页面。

2.3 商品详情页获取路由带过来的参数

<script>import{onMounted}from"vue";import{useRoute}from'vue-router';exportdefault{
  name:"gooddetail",
  components:{},setup(){const route=useRoute();const state=reactive({
      id:0})onMounted(async()=>{const{id}= route.params
          console.log(id);
          state.id= id})}}</script>

2.4 跳转至确认订单页面

<script>import{onMounted}from"vue";import{useRouter}from'vue-router';exportdefault{
  name:'Home',
  components:{},setup(){const router=useRouter();constconfirmOrder=()=>{const id=1;const attrid=2;const amount=3;
      router.push(`/confirmorder/${id}/${attrid}/${amount}`);}return{
      confirmOrder}}}</script>

2.5 确认订单页面获取路由传参

<script>import{onMounted}from"vue";import{useRoute}from'vue-router';exportdefault{
  name:"confirmorder",
  components:{},setup(){const route=useRoute()onMounted(async()=>{const{id, ids, amount}= route.params;
		console.log(id)
		console.log(ids)
		console.log(amount)})}}</script>

2.6 返回上一页

<script>import{onMounted}from"vue";import{useRouter}from'vue-router';exportdefault{
  name:'Home',
  components:{},setup(){const router=useRouter();constgoBack=()=>{
      router.go(-1);}return{
      goBack}}}</script>

结语

以上代码片段可供参考，具体使用或者测试，请根据需求进行修改，对以上教程有异议，可在评论区评论或者联系我QQ1004991278。

最后，以上所有代码在我的开源仓库：https://github.com/maxzyt/vue3-mall-page，都可以找到，喜欢的点个star。