Vue路由器（详细教程）

最新推荐文章于 2025-06-02 09:03:09 发布

林代码er

最新推荐文章于 2025-06-02 09:03:09 发布

阅读量791

点赞数 16

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/m0_71088505/article/details/134621598

本文介绍了如何在Vue项目中安装和使用VueRouter进行前端路由管理，包括在main.js中安装并配置路由插件，以及在组件中使用`router-link`和`router-view`实现页面跳转和组件动态加载。

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

路由：

1.理解：一个路由(route)就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理。

2.前端路由：key是路径，value是组件。

1、先安装vue-router路由

npm i vue-router@3

2.main.js中应用插件

import Vue from 'vue'
import App from './App.vue'
//引入VueRouter
import VueRouter from "vue-router";
//引入自己配置完的路由
import router from './router'

//关闭vue生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
new Vue({
  el:'#app',
  render: h => h(App),
  router:router
})

app.vue