Vue.js功法之练气初期：复习知识点之Vue 路由（Vue Router）

Vue 路由

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。它允许你通过 URL 来管理应用的视图和状态，使得应用在不同页面之间切换变得简单。

为什么使用 Vue 路由？

1. 单页面应用： Vue Router 支持构建单页面应用，通过动态加载组件实现页面切换，提升用户体验。
2. 状态管理： 可以方便地管理应用的状态，通过路由参数传递信息。
3. 嵌套路由： 支持嵌套路由，使得组织页面结构更加灵活。

示例代码

以下是一个简单的 Vue Router 示例，包含两个页面：Home 和 About。

1. 安装 Vue Router

npm install vue-router

2. 创建路由配置文件 - router.js

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

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = new VueRouter({
  routes,
});

export default router;

3. 在 main.js 中使用路由

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

4. 创建页面组件 - Home.vue 和 About.vue

<!-- Home.vue -->
<template>
  <div>
    <h2>Home 页面</h2>
    <p>Welcome to the Home page!</p>
  </div>
</template>

<script>
export default {
};
</script>
<!-- About.vue -->
<template>
  <div>
    <h2>About 页面</h2>
    <p>This is the About page!</p>
  </div>
</template>

<script>
export default {
};
</script>

5. 在 App.vue 中使用路由出口和导航链接

<template>
  <div id="app">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
};
</script>