在vue-cli创建的项目中导入vue-router_vuecli 引入route-优快云博客

本文详细介绍了如何在vue-cli构建的项目中引入vue-router，包括安装v-router，创建router.js配置路由，修改main.js引入路由，并在App.vue中注册路由组件。注意在main.js中使用`router`导入并注册时，需遵循对象属性缩略写法的规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue-cli创建的项目中导入vue-router

首先，安装 v-router：

yarn add vue-router

或者

npm install vue-router -S

然后，在 src 文件下创建 router.js 文件，在其中导入 vue，vue-router，以及需要根据不同 url 地址显示的组件：

import Vue from 'vue';
import Router from 'vue-router';
import Hello from '@/components/HelloWorld';
import Hi from '@/components/Hi';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/',
            name: 'Hello',
            component: Hello,
        },
        {
            path: '/hi',
            name: 'Hi',
            component: Hi,
        }
    ]
})

接着，在根目录的 App.vue 文件中使用 vue-router 提供的默认标签 <router-view> 来导入路有文件。

最后，我们需要在根目录下的 main.js 文件中，注册 router 组件：

import Vue from 'vue'
import App from './App.vue'
import router from './router/index';

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

需要注意的一点，这里的 router 必须小写，这里是对象属性赋值的缩略写法，完整写法为：

router: router

如果 router 组件命名为其他名称，如：

import Vue from 'vue'
import App from './App.vue'
import Router from './router/index';

Vue.config.productionTip = false

new Vue({
  router: Router,
  render: h => h(App),
}).$mount('#app')

需要赋值。