Vue3.0路由 -- 學習筆記

1.在新建項目時選擇Router

之后打開項目，就會在項目目錄下有如下：router文件夾下配置路由，views里編輯路由跳轉頁面

2.路由的路徑配置都在index.js文件里，

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

// 兩種方式引入頁面
const routes = [
  {
    path: '/',
    name: 'Start',
   // 方法一
    component: () => import('../views/Start.vue')
  },
  {
    path: '/home',
    name: 'Home',
    // 方法二
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3.頁面里進行路由跳轉

<template>
  <div>
      <button @click="start">路由跳轉</button>
  </div>
</template>
<script>
// 定義一個組件
import {defineComponent} from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
  name: 'Start',
  props:{

  },
  components:{

  },
  setup(props,ctx){
      //router是全局路由對象，route= userRoute()是當前路由對象
    let router = useRouter();
   let start = () => {
       router.push({
    //傳遞參數使用query的話，指定path或者name都行，但使用params的話，只能使用name指定 
        path:'/home',
        query:{
        num:1
        }
        //name:'Home',
        //params:{
        //num:1
        //}
      );
   }
    return{
        start
    }
  }
})
</script>
<style scoped lang='scss'>

</style>

4.接收參數

<template>
  <div>
      {{num}}
  </div>
</template>
<script>
// 定義一個組件
import {defineComponent} from 'vue'
import {useRoute} from 'vue-router'
export default defineComponent({
  name: 'Home',
  props:{

  },
  components:{

  },
  setup(props,ctx){
      //router是全局路由對象，route= userRoute()是當前路由對象
    let route = useRoute();
   let num = route.query.num;
    //let num = route.params.num;
    return{
        num
    }
  }
})
</script>
<style scoped lang='scss'>

</style>