vue routerjs 首页设置
时间: 2023-11-23 16:19:04 浏览: 26
在 Vue Router 中,可以通过配置路由来设置首页。
首先,在路由配置文件中定义一个路由对象,将其 `path` 属性设置为 `/`,并将 `component` 属性设置为首页组件的名称或引用。例如:
```javascript
import Home from '@/views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
// 其他路由...
]
export default new Router({
routes
})
```
在上面的代码中,我们定义了一个名为 `Home` 的路由,将其 `path` 属性设置为 `/`,将 `component` 属性设置为 `Home` 组件。
接下来,在应用程序的入口文件中导入路由实例,并将其安装到 Vue 实例中。例如:
```javascript
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')
```
在上面的代码中,我们将路由实例 `router` 安装到 Vue 实例中。
最后,在首页组件中添加页面内容,例如:
```html
<template>
<div>
<h1>欢迎来到我的博客!</h1>
<p>这里是我的博客首页。</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
/* 页面样式 */
</style>
```
在上面的代码中,我们定义了一个名为 `Home` 的组件,添加了一些页面内容,并将其导出供其他组件使用。
现在,访问应用程序的根路径即可显示首页内容。