Vue3---Vue3项目切换(设置)路由模式

谁践踏了优雅 2022-10-29 13:29 524阅读 0赞
  • history模式:在路由index.js文件中导入 createWebHistory

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

    const routes = [
    {

    1. path: '/',
    2. name: 'Home',
    3. component: Home

    },
    {

    1. path: '/about',
    2. name: 'About',
    3. component: () => import('../views/About.vue')

    }
    ]

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

    export default router

  • hash模式:在路由index.js文件中导入 createWebHashHistory

    import { createRouter, createWebHashHistory } from ‘vue-router’
    import Home from ‘../views/Home.vue’

    const routes = [
    {

    1. path: '/',
    2. name: 'Home',
    3. component: Home

    },
    {

    1. path: '/about',
    2. name: 'About',
    3. component: () => import('../views/About.vue')

    }
    ]

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

    export default router

发表评论

表情:
评论列表 (有 0 条评论,524人围观)

还没有评论,来说两句吧...

相关阅读

    相关 VUE3 Router

    > 使用Vue Router可以在不同的组件间切换,根据不同的url地址,路由跳转到不同的组件 > > 提供了俩个路由组件 > > <router-link>:用来定义导航