vue2-vue-router(路由)学习笔记

最新推荐文章于 2024-08-21 15:44:13 发布

不会掉发的程序员-汤姆

最新推荐文章于 2024-08-21 15:44:13 发布

阅读量293

点赞数

分类专栏：学习笔记文章标签： vue vue.js

本文链接：https://blog.csdn.net/xzl2233/article/details/120512119

版权

本文详细介绍了在Vue2项目中使用vue-router解决单页面应用中的路径选择、组件定位及无刷新切换等问题。首先讲解了vue-router的安装与基础配置，包括在main.js和App.vue中的应用。接着讨论了路由模式，包括hash、history和abstract模式的特点和适用场景。此外，还提到了路由的导航功能、激活状态的判断以及如何通过命名规则简化路径管理。通过对路由的深入理解，可以更好地实现Vue项目的高效开发。

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

在我们使用vue开发一个单页面的项目时，我们总会思考三个问题

如何根据地址中的路径选择不同的组件？
把选择的组件放到哪个位置？
如何无刷新的切换组件？

而这三个问题恰恰用vue2里面的vue-router插件可以轻松解决

首先我们必须先安装vue-router插件

找到我们项目文件夹，在终端中打开输入npm i vue-router

路由插件的使用

找到项目下的main.js文件(我是练习的，vue生成项目之后App.vue和main.js名字都没修改)，在main.js里加入以下代码，启动vue-router插件

import Vue from "vue";
import App from "./App.vue";
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);//Vue.use(插件)，在vue中安装插件

const router = ({
    //路由配置
})

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