vue add router 不能用
时间: 2023-08-02 07:28:41 浏览: 57
如果 `vue add router` 命令无法使用,可能是因为你使用的 Vue CLI 版本较老,无法自动安装插件。此时可以使用以下方法手动安装路由插件:
1. 在项目根目录下使用以下命令安装 `vue-router` 和 `@vue/cli-plugin-babel`:
```
npm install vue-router @vue/cli-plugin-babel --save
```
2. 在项目根目录下创建一个 `router` 目录,并在该目录下创建一个 `index.js` 文件,用于配置路由。例如:
```
import { createRouter, createWebHistory } from 'vue-router'
import Foo from '@/views/Foo.vue'
import Bar from '@/views/Bar.vue'
const routes = [
{
path: '/foo',
component: Foo
},
{
path: '/bar',
component: Bar
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
在上面的代码中,我们使用 `createRouter()` 方法来创建路由实例,然后配置路由路径和对应的组件。
3. 在 `main.js` 中导入路由,并将其挂载到 Vue3 实例上,例如:
```
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
```
这样就完成了手动配置路由的过程。需要注意的是,手动配置路由需要更多的配置工作,但是也更加灵活,可以满足更多的需求。如果需要更加详细的配置信息,可以参考 Vue Router 的官方文档。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)