正文

Vue Router实战案例：新手快速上手，跟着案例学配置与使用

/0 浏览量
0706

了解Vue Router

在Vue.js项目中，Vue Router是一个强大的路由管理器，它可以帮助我们实现单页面应用（SPA）的路由功能。通过Vue Router，我们可以定义路由和路由的匹配规则，控制页面的切换，实现组件的按需加载。

实战案例：搭建一个简单的Vue Router应用

1. 创建项目

首先，我们需要创建一个Vue.js项目。这里我们使用Vue CLI来创建项目。

vue create my-vue-router-app

2. 安装Vue Router

在项目根目录下，运行以下命令来安装Vue Router。

npm install vue-router

3. 配置Vue Router

在项目根目录下，创建一个名为router的文件夹，并在其中创建一个名为index.js的文件，用于配置Vue Router。

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

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

4. 在Vue实例中使用Vue Router

在src/main.js文件中，引入并使用我们刚刚创建的router实例。

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

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

5. 创建组件

在src/components文件夹下，创建两个组件Home.vue和About.vue。

Home.vue:

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

About.vue:

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

6. 使用路由导航

在App.vue中，使用router-link组件来实现页面之间的导航。

<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 {
  name: 'App'
}
</script>

7. 运行项目

在终端中运行以下命令来启动项目。

npm run serve

现在，你可以通过访问http://localhost:8080/来查看你的Vue Router应用了。

总结

通过以上步骤，我们成功地搭建了一个简单的Vue Router应用。在这个案例中，我们学习了如何配置Vue Router，如何创建路由，以及如何在Vue组件中使用路由导航。这些知识将帮助你快速上手Vue Router，并在实际项目中应用它。

-- 展开阅读全文 --