vue2 router引入
时间: 2023-07-18 15:35:50 浏览: 87
要在 Vue2 项目中使用 Vue Router,需要先安装 Vue Router 包,可以使用 npm 或 yarn 安装,如下所示:
```
npm install vue-router
```
或者
```
yarn add vue-router
```
安装完成之后,在 main.js 中引入并注册 Vue Router:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [...],
mode: 'history'
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
在上面的代码中,我们首先通过 import 语句引入了 Vue 和 Vue Router,并在 Vue 实例中通过 Vue.use() 方法注册了 Vue Router 插件。接着,我们创建了一个 VueRouter 实例,并将其传递给了 Vue 实例中的 router 选项。同时,我们还可以配置 VueRouter 实例的一些选项,比如路由模式和路由表等。最后,我们通过 $mount() 方法将 Vue 实例挂载到指定的 DOM 元素上。
此时,我们就可以在 Vue 组件中使用 Vue Router 提供的路由功能了。例如,在组件中使用 router-link 组件来创建链接,使用 router-view 组件来显示当前路由对应的组件。具体用法可以参考 Vue Router 官方文档。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)