在 Vue 2、Vue 3 和 React 中历史模式和哈希模式用法

最新推荐文章于 2024-07-12 15:14:43 发布

是楠楠呀n~

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量487

点赞数 16

文章标签： vue.js react.js

本文链接：https://blog.csdn.net/weixin_48947144/article/details/136474132

版权

本文对比了Vue2.x和Vue3中使用VueRouter的历史模式与哈希模式，以及React中BrowserRouter和HashRouter的示例，展示了在不同框架中设置路由的方式。

摘要由CSDN通过智能技术生成

vue2

历史模式、哈希模式

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',

// mode: 'hash',
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});

new Vue({
el: '#app',
router,
render: h => h(App)
});

vue3

历史模式、哈希模式

import { createApp } from 'vue';
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const router = createRouter({
history: createWebHistory(),

// history: createWebHashHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
});

const app = createApp(App);
app.use(router);
app.mount('#app');

React

历史模式、哈希模式

import React from 'react';

import { BrowserRouter as Router, Route } from 'react-router-dom';

import Home from './components/Home';

import About from './components/About';

function App() {

        return (

               <Router>

                     <Route path="/" component={Home} />

                     <Route path="/about" component={About} />

               </Router>

        );

}

import React from 'react';
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

function App() {
return (
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}