为vue添加router

最新推荐文章于 2024-07-02 20:30:00 发布

风不归Alkaid

最新推荐文章于 2024-07-02 20:30:00 发布

阅读量569

点赞数 8

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_49015143/article/details/134824914

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中安装VueRouter，创建Router实例，定义路由，并在main.js中集成和使用。步骤包括npm或yarn安装、创建路由文件、设置路由模式和在主应用中挂载路由器。

摘要由CSDN通过智能技术生成

1. 安装Vue Router

打开命令行终端，进入Vue项目目录，然后运行以下命令：

npm install vue-router

或者如果使用yarn：

yarn add vue-router

2. 创建Router实例

在Vue项目中，通常会有一个 src 目录，进入 src 目录，然后创建一个名为 router 的文件夹，再在里面创建一个 index.js 文件。

// src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // 在这里定义你的路由
  {
    path: '/',
    component: () => import('@/views/Home.vue'), // 示例：创建一个Home.vue组件
    name: 'Home',
  },
  // 其他路由
];

const router = new VueRouter({
  routes,
  mode: 'history', // 可选，使用history模式，需要后端支持
});

export default router;

确保项目中已经有 views 文件夹，并在里面创建一个 Home.vue 文件。

3. 在主应用中使用Router

打开主应用文件（通常是 src/main.js），并添加以下代码：

// src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入刚刚创建的router实例

Vue.config.productionTip = false;

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