Vue3 实现路由跳转
要实现路由跳转,可以使用Vue Router。下面是一个简单的示例:
1. 首先,通过命令行安装Vue Router插件:
“`bash
npm install vue-router@next
“`
2. 在Vue项目的入口文件(通常是main.js)中,引入Vue Router并配置路由:
“`javascript
import { createApp } from ‘vue’;
import { createRouter, createWebHistory } from ‘vue-router’;
import Home from ‘./components/Home.vue’;
import About from ‘./components/About.vue’;
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About }
]
});
const app = createApp(App);
app.use(router);
app.mount(‘#app’);
“`
3. 在Vue组件中使用“来实现路由跳转:
“`vue
Home
About
“`
4. 在Vue组件中使用“来渲染对应的组件:
“`vue
My App
“`
这样就可以实现基本的路由跳转了。当用户点击“时,Vue Router会自动更新URL,并渲染对应的组件到“中。
更详细的用法和配置可以参考Vue Router的官方文档:https://next.router.vuejs.org/