vue项目中怎么实现静态路由表的搭建
时间: 2024-05-12 11:19:15 浏览: 7
在Vue项目中,可以通过创建一个名为router.js的文件来实现静态路由表的搭建。
首先,在该文件中引入Vue和Vue Router:
```
import Vue from 'vue'
import Router from 'vue-router'
```
然后,定义路由表,即路由路径和对应的组件:
```
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Contact from '@/components/Contact.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]
```
接着,创建Vue Router实例并将路由表作为参数传递给它:
```
Vue.use(Router)
const router = new Router({
mode: 'history',
routes
})
```
最后,将路由实例导出,以便在Vue应用程序中使用:
```
export default router
```
在Vue应用程序中,可以通过导入路由实例并将其挂载到Vue实例上来使用:
```
import router from '@/router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
这样,静态路由表就成功地搭建完成了。