At the beginning

  • Flag was set up at the beginning of the year, and 99 articles will be written this year, which is purely personal study notes!
  • As I have just started to write an article, I can point out any problems in time and correct them in the first time!
Create a way
  • createRouter
  • Used to create a Router object
  • 4. Use x
import { createRouter } from "vue-router"
const router = createRouter({
    // opyions. })Copy the code
  • 3. X
import VueRouter from "vue-router"' const router = new VueRouter({ // options ...... })Copy the code

Routing patterns

  • createWebHashHistory (hash)
  • createWebHashHistory (history)
  • 4. Use x
import { 
    createRouter,
    createWebHashHistory,
    createWebHashHistory
} from 'vue-router'
const router = createRouter({
    history:createWebHashHistory() / createWebHashHistory()
})
Copy the code
  • 3. X
 const router = new VueRouter({
    mode: 'hash' / 'history'
 })
Copy the code

redirect

  • The writing has changed
  • 4. X’s writing
{path: '/:pathMatch(.*)*', // Redirect: Home,}Copy the code
  • 3. The x’s writing
{
    path: The '*'.redirect: Home
}
Copy the code

Mount the way

  • Vue-router is mounted as a plug-in due to vue3’s Composition API
  • 4. The use of the x
    import { createApp } from 'vue'
    import router from './router.js'
    import App from './App.vue'
    createApp(App).use(router).mount('#app');
Copy the code
  • 3. Use of x to mount it as an attribute
 import router from './router.js'
   new Vue({
      router
   })
Copy the code

Use in components

  • Since this is not accessible from setup, two apis are provided to obtain router and route, useRouter() and useRoute().
  • 4. The use of the x
   import { useRouter,useRoute } from "vue-router"
   export default({
      setup(){
        const router = useRouter();
        const route = useRoute();
        const linkToHome = () = > {
            router.push({
                path:'/'})}return{
            linkToHome
        }
      }
   })
Copy the code
  • 3. The use of the x
    export default({
       methods: {linkToHome(){
           this.$router.push({
                   path:'/'}}}})Copy the code

Navigation guard

  • Due to the Vue3 Composition API, beforeRouteUpdate and beforeRouteLeave were replaced with onBeforeRouteUpdate and onBeforeRouteLeave