目录
1. 安装 vue-router
2. 创建 Vue 项目结构
3. 配置路由
4. 在 main.js 中使用路由
5. 在 App.vue 中添加
6. 创建组件
7. 运行你的应用
在 Vue.js 2 中，路由管理通常通过 vue-router 插件来实现。vue-router 是一个官方的路由管理器，允许你在单页应用（SPA）中轻松地管理和导航不同的视图（页面）。以下是如何在 Vue 2 项目中设置和使用 vue-router 的基本步骤：
1. 安装 vue-router
首先，你需要安装 vue-router。如果你使用的是 npm，可以通过以下命令安装：
npm install vue-router
2. 创建 Vue 项目结构
假设你已经有一个 Vue 项目，你的项目结构可能看起来像这样：
my-vue-app/
│
├── src/
│ ├── components/
│ │ ├── Home.vue
│ │ ├── About.vue
│ │ └── ...
│ ├── App.vue
│ ├── main.js
│ └── router/
│ └── index.js
│
└── ...3. 配置路由
在 src/router/index.js 中配置你的路由：
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({routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}// 你可以在这里添加更多的路由]
});
4. 在 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');
5. 在 App.vue 中添加 <router-view>
<router-view> 是一个功能性的组件，它会渲染路径匹配到的组件。在 src/App.vue 中添加 <router-view>：
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');
6. 创建组件
确保你已经创建了 Home.vue 和 About.vue 组件，并且它们位于 src/components/ 目录下。例如，Home.vue 可能看起来像这样：
<template><div><h1>Home Page</h1><p>Welcome to the home page!</p></div>
</template><script>
export default {name: 'Home'
};
</script><style scoped>
/* 你的样式 */
</style>About.vue 类似：
<template><div><h1>About Page</h1><p>This is the about page.</p></div>
</template><script>
export default {name: 'About'
};
</script><style scoped>
/* 你的样式 */
</style>
7. 运行你的应用
现在，你可以运行你的 Vue 应用，并通过浏览器访问不同的路由。例如，访问 http://localhost:8080/ 会显示 Home 组件，访问 http://localhost:8080/about 会显示 About 组件。
npm run serve
这样，你就成功地在 Vue 2 项目中设置了 vue-router。你可以根据需要添加更多的路由和组件，并配置更复杂的导航逻辑。
