030、Vue3+TypeScript基礎，路由中History和HashHistory的區別

像一棵海草海草海草發表於2024-08-18
VueTypeScript路由

01、index.ts路由程式碼如下：

//建立路由並暴露出去
import {createRouter, createWebHistory} from 'vue-router'
import Home from '@/view/Home.vue'
import About from '@/view/About.vue'
import News from '@/view/News.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {path: '/home', component: Home},
        {path: '/about', component: About},
        {path: '/news', component: News},
    ]
})

export default router

02、效果如下

03、index.ts程式碼如下：

//建立路由並暴露出去
import {createRouter, createWebHashHistory} from 'vue-router'
import Home from '@/view/Home.vue'
import About from '@/view/About.vue'
import News from '@/view/News.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {path: '/home', component: Home},
        {path: '/about', component: About},
        {path: '/news', component: News},
    ]
})

export default router

04、習慣如下：

相關文章