vue项目使用vue-router

最新推荐文章于 2025-08-02 15:51:48 发布

原创最新推荐文章于 2025-08-02 15:51:48 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍如何在基于webpack-simple构建的Vue项目中集成vue-router。步骤包括：1) 搭建Vue项目架构；2) 下载vue-router并保存为开发依赖；3) 创建router文件夹及index.js配置路由；4) 修改main.js引入路由配置；5) 在App.vue中使用router-view展示页面。最后，通过npm run dev验证设置。

一、基于webpack-simple构建的vue项目中，怎么集成vue-router？

1、搭建vue项目架构
参考链接：https://blog.youkuaiyun.com/marslover521/article/details/80938686
其中从第五步开始构建vue项目

2、配置vue-router

2.1 下载

npm install vue-router --save-dev

2.2 新建文件夹router
在src文件夹中创建文件夹router，并在router文件夹中新建index.js文件
2.3 配置router，编写router/index.js文件中内容

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'    
	//Home为components文件夹中文件，Home.vue

Vue.use(Router)
Vue.config.productionTip = false;

const router = new Router({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '*',
            redirect: '/home'
        }
    ]
})
export default router;

2.4 修改main.js

import Vue from 'vue'
import App from './App.vue'

//路由
import router from './router/index.js'    //引入路由配置文件

Vue.prototype.$echarts = echarts
new Vue({
  el: '#app',
  router,    //new Vue里面加入router项
  render: h => h(App)
})

2.5 router-view 展示页面
在App.vue文件中，通过router-view在template模板中直接引入就可以。

<template>
  <div id="app" class="app">
    <router-view></router-view>
  </div>
</template>

2.7 验证

npm run dev

在DOS或者bash窗口运行以上代码查看

参考链接：https://www.jianshu.com/p/748b0f6523f0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation