使用vue2生成动态路由的详细代码
时间: 2023-11-06 18:07:14 浏览: 38
好的,以下是使用Vue2生成动态路由的详细代码:
1. 安装 Vue Router:
```
npm install vue-router --save
```
2. 在Vue项目中创建一个router文件夹,然后新建一个index.js文件来配置路由,代码如下:
```
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Contact from '@/views/Contact.vue'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
})
export default router
```
3. 然后在main.js中引入路由,并挂载到Vue实例上:
```
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')
```
以上是Vue2生成动态路由的详细代码。如果您有其他问题,可以继续提问,我会尽快回答。