Vue路由配置：轻松掌握，畅游单页应用

2023-08-11 08:15:50

Vue 路由：单页应用的无缝导航

配置 Vue 路由

Vue 路由是一个强大的工具，可以为 Vue.js 应用实现无缝的路由管理。以下是配置 Vue 路由的步骤：

1. 安装 Vue 路由

使用 npm 安装 Vue 路由：

npm install vue-router

2. 创建路由文件

在 src 目录下创建 router 文件夹，并添加 index.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: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

export default router;

3. 创建视图文件

在 src/views 文件夹下创建 Home.vue 和 About.vue 文件：

Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p>This is the home page.</p>
  </div>
</template>

About.vue

<template>
  <div>
    <h1>About</h1>
    <p>This is the about page.</p>
  </div>
</template>

4. 注册路由

在 src/main.js 文件中，注册路由：

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

Vue.config.productionTip = false;

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

5. 在 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>