vue3使用路由

下載

npm install vue-router@4

配置路由

• 暴露出一個createRouter方法，用來創建路由對象
• 通過defineAsyncComponent方法來實現路由的懶加載(文章1.13號更新：正式版本可以不用這個方法)

import {
    defineAsyncComponent
} from 'vue'
import {
    createRouter,
    createWebHistory
} from 'vue-router'


const routes = [{
        path: '',
        redirect: {
            name: 'home',
        }
    }, {
        path: "/home",
        name: 'home',
        //component: defineAsyncComponent(() => import('/src/pages/home/index.vue'))  //使用defineAsyncComponent來包裹  rc版本
        component:() => import('/src/pages/home/index.vue'),// V3.0.5
    },
    {
        path: "/about",
        name: 'about',
        component: defineAsyncComponent(() => import('/src/pages/about/index.vue'))
    }
]

export default createRouter({
    history: createWebHistory(), //===>mode:"history"
    routes,
})

導航

• setup里面獲取不到this，路由提供了兩個方法useRouter和useRoute來替代原來的api

<script>
import { useRouter, useRoute } from "vue-router";

export default {
  name: "App",
  props: {},
  setup(props, { attrs, slots, emit }) {
      const router =useRouter() //==>this.$router
      const route=useRoute()//this.$route
      const goRouter = () => {
        router.push("/about");
      };
      return{
          goRouter,
      }
  }
}
</script>