Vue 路由(Vue Router)是 Vue.js 官方的路由管理器。它和 Vue.js 核心深度集成,使构建单页面应用变得易如反掌。
http://yoursite.com/user/id
。Vue 路由广泛应用于各种单页面应用(SPA)中,如:
原因:
<router-view>
标签来显示路由组件。解决方法:
<router-view>
标签。router-link
组件或 this.$router.push
方法来进行导航。// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
const app = createApp(App);
app.use(router);
app.mount('#app');
<!-- App.vue -->
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>
通过以上信息,你应该对 Vue 路由有了一个全面的了解,包括其基础概念、优势、类型、应用场景以及常见问题的解决方法。
领取专属 10元无门槛券
手把手带您无忧上云