如何正确引入views
时间: 2024-03-01 21:49:58 浏览: 25
在你的项目中,你需要按照以下步骤正确引入 views:
1. 在 `src` 目录下创建一个名为 `views` 的文件夹。
2. 在 `views` 文件夹中创建你需要的视图组件,例如 `Home.vue` 和 `About.vue`。
3. 在 `router` 目录下的 `index.js` 文件中,引入你的视图组件:
```javascript
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
在这个例子中,我们首先从 Vue 和 Vue Router 中导入所需的库。我们然后通过 `Vue.use()` 方法在全局范围内注册 Vue Router。接下来,我们引入了我们之前创建的 `Home.vue` 和 `About.vue` 组件,并将它们分别关联到 `/` 和 `/about` 路径上。
4. 在你的 Vue 组件中使用路由:
```html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
```
在这个例子中,我们在组件模板中使用 `router-link` 组件来生成跳转链接。 `to` 属性指定了跳转路径。当用户点击链接时,Vue Router 将会自动切换路由,并将相应的组件渲染到页面中。
这样,你就已经成功地引入了视图组件。