Vue Router 技术教程

引言

在Vue.js应用中使用Vue Router可以方便地实现前端路由管理，使应用具有SPA（单页面应用）的特性。本文将详细介绍Vue Router的使用，并通过一个具体的案例来讲解如何配置和使用Vue Router。

安装Vue Router

首先，确保你的Vue项目已经创建。如果还没有，可以使用Vue CLI创建一个新的Vue项目。接下来，安装Vue Router：

npm install vue-router

配置Vue Router

接下来，我们需要创建一个Vue Router实例并配置路由规则。假设我们有一个简单的Vue应用，包含Home、About和Contact三个页面。

1. 创建路由组件

创建三个简单的Vue组件，分别命名为Home.vue、About.vue和Contact.vue。

Home.vue

<template>
    <div>
        <h2>Home Page</h2>
    </div>
</template>

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

<style scoped>
/* 样式可以自定义 */
</style>

类似地，创建About.vue和Contact.vue。

2. 配置路由

在src目录下创建一个router文件夹，并在其中创建一个index.js文件。这个文件将包含路由配置。

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Contact from '@/components/Contact.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

3. 使用路由

最后，在src/main.js中引入并使用路由。

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')

创建App.vue和导航菜单

接下来，修改App.vue以包含导航菜单和路由视图。

App.vue

<template>
    <div id="app">
        <nav>
            <ul>
                <li><router-link to="/">Home</router-link></li>
                <li><router-link to="/about">About</router-link></li>
                <li><router-link to="/contact">Contact</router-link></li>
            </ul>
        </nav>
        <router-view/>
    </div>
</template>

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

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul li {
    display: inline-block;
    margin: 0 10px;
}
nav ul li a {
    text-decoration: none;
    color: #42b983;
}
</style>