vue2安装路由
时间: 2023-07-20 21:07:29 浏览: 35
要在 Vue2 中安装路由,可以按照以下步骤进行:
1. 首先,在项目目录下运行以下命令来安装 `vue-router`:
```
npm install vue-router --save
```
2. 在 `src` 目录下创建一个名为 `router` 的文件夹,并在其中创建一个名为 `index.js` 的文件。
3. 在 `index.js` 文件中,引入 `Vue` 和 `vue-router`,并使用 `Vue.use()` 方法注册路由插件。例如:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
4. 在同一文件中,定义路由的映射关系,即将 URL 路径和对应的组件关联起来。例如:
```javascript
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
```
在这个例子中,我们定义了两个路由,一个是根路径 `/` 对应 `Home` 组件,另一个是 `/about` 路径对应 `About` 组件。
5. 创建 `VueRouter` 实例,并将定义好的路由映射关系传入。例如:
```javascript
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
```
这里我们使用了 `history` 模式,可以让 URL 看起来更加清晰。`routes` 参数则是我们在第4步中定义好的路由映射关系。
6. 最后,在 `main.js` 中引入 `router` 并将其挂载到 Vue 实例上。例如:
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
在这里,我们将 `router` 实例作为 `Vue` 实例的一个选项传入,并在 `App.vue` 组件中使用 `<router-view>` 标签来渲染路由对应的组件。
以上就是在 Vue2 中安装和使用路由的基本步骤。