vue2安装路由
时间: 2023-07-18 16:05:43 浏览: 89
要在Vue2中安装路由,需要以下步骤:
1. 安装vue-router
可以使用npm或yarn安装vue-router:
```
npm install vue-router --save
```
或
```
yarn add vue-router
```
2. 创建路由实例
在Vue2中,需要使用VueRouter类来创建路由实例。在main.js文件中导入VueRouter并使用Vue.use()方法将它安装到Vue中:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
```
3. 配置路由
使用VueRouter类创建路由实例后,需要配置路由映射表,将路径与组件对应起来。在项目根目录下创建一个router.js文件,并使用以下代码进行配置:
```
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
```
在以上代码中,我们定义了一个路由映射表,将根路径'/'映射到Home组件上。
4. 将路由实例挂载到Vue实例中
最后,在Vue实例中挂载路由实例,将其应用到整个应用程序中:
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
以上就是在Vue2中安装路由的步骤。
阅读全文