vue router4在vue3使用

vue router4在vue3使用

Created: Oct 13, 2020 1:52 PM
功能: Vue Router

import {createApp, h} from 'vue'
import App from './App.vue'
import './index.css'
import {createRouter, createWebHashHistory} from 'vue-router'
import Todos from "./components/Todos.vue";
import Dashboard from "./components/Dashboard.vue";

const router = createRouter({
    history: createWebHashHistory(),
    routes: [{
        path: '/',
        name: 'dashboard',
        component: Dashboard
    }, {
        path: '/todos',
        name: 'todos',
        component: Todos
    }]

})
// 动态路由

router.addRoute({
    path: '/about',
    name: 'about',
    component: () => import('./components/About.vue')
})
router.addRoute('about', {
    path: '/about/info',
    name: 'info',
    component: {
        render() {
            return h('div', 'info page');
        }
    }
})
createApp(App)
    .use(router)
    .mount('#app')

<template>
  <h1>
    todos组件
  </h1>
  <button @click="backToDash">dashboard</button>
</template>

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

export default {
  name: "Todos",
  setup() {
    // 获取路由器实例
    const router = useRouter()
    // route是响应式对象,可监控器变化
    const route = useRoute()
    watch(
        () => route.query,
        (query) => {
          console.log(query);
        }
    );
    // 守卫
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm('是否确定要离开');
      if (!answer) {
        return false
      }
    })
    return {
      backToDash() {
        console.log(route.query)
        router.push('/')
      },

    }
  }
}
</script>

<style scoped>

</style>

------------恢复内容结束------------