vue2 项目中如何配置路由

在 Vue2 项目中，配置路由需要以下步骤：

1. 在项目中安装路由插件，可以使用命令行或者通过 vue ui 界面来安装。

2. 在项目入口文件（例如 main.js）中，导入路由插件并且使用。

3. 在项目根目录中创建一个 routes.js 文件，用于定义路由相关信息。

4. 在 routes.js 文件中使用 VueRouter 创建一个路由实例，并且定义路由地址和对应的组件。

5. 在主页面中使用 router-view 组件来渲染路由对应的组件，使用 router-link 组件来跳转不同的路由地址。

示例代码如下：

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routes from './routes.js'

Vue.use(VueRouter)

const router = new VueRouter({
routes
})

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

// routes.js
import Home from './components/Home.vue'
import About from './components/About.vue'

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

export default routes

// App.vue
<template>
<div id="app">
<h1>Vue Router Example</h1>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>

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