看过很多vue相关的教程，我觉得是讲的人很嗨，不管你听不听得懂，总是自说自话，学的人是没有办法坚持下去，能坚持下去的，扔掉教程自己写一遍完全懵逼，其实vue最大的好处就是组件化开发。那么，vue的学习就得最终回归到组件化里边去，只有去到组件化开发环境中去切实走一遍之前学过的知识点，通过一个项目完全串联，才会领略到vue的强大，否则，我个人认为，如果你对jquery够熟悉，它也足够的优秀！
这一章节我们正式进入vue的周边生态vue-router，正式进入真实项目中学习，串联起之前的所有知识！
如果你还没有创建项目，请看上一张veu/cli相关知识！或者关注CRMEB掘金号查看vue系列文章，我们一起学习，在技术的世界互相碰撞交流！
Vue Router将分为两个部分：
- Vue Router基本使用（本篇）
- Vue Router动态传参及导航守卫（下篇）
什么是vue-router?
官方解释：
vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
个人总结： vuerouter是vue的一个路由系统，一个路由地址对应一个组件，采用的是html5的 history 和 锚链接 的方式进行组装跳转。
history和锚链接的概念这里不做过多解释，在vue里的表现形式就是链接里有没有#号的区别，但其内在肯定是有不同的，具体大家有兴趣可自行去了解下，我这里要说的是，上边提到了一个路由的概念，那么什么是路由？
什么是路由？
路由一词相信生活中常听到的就是路由器，一个路由器可以连接多台电脑，供多台电脑同时联网，这是因为路由器可以生成多个网络地址，一个网络地址对应一台电脑，这就构成了一个端到端的网络路径！
web里的路由原理也是类似的，根据URL来将请求分配到指定的一个‘端’，那么在vue里充当这个端的就是组件。简单理解下路由的概念就是这样，具体专业的解释，大家可以去百度百科了解下，这里就不做过多专业名词的搬运，希望通过我的理解能给大家带来一些启发！
VueRouter的基本配置
在上一章我们通过vue-cli创建项目的时候，我们已经勾选默认安装了vue-router,在项目的src文件夹下有个router的文件夹，文件夹内部有个index.js的文件，这里放的就是vue-router相关配置的地方：
通过这个我们就可以梳理出一个简单的vue-router的使用流程，当然，如果你通过vue-cli创建项目时默认勾选，那以下步骤都可以省略！
- 安装vue-router
npm install vue-router
- 在src文件夹下创建一个router文件夹，再在其内部创建一个index.js文件,引入如下内容:
// src/router/index.js
// 1. 引入vue和VueRoter
import Vue from "vue";
import VueRouter from "vue-router";
// 这里引入的Home是我们提前在views文件夹下创建的组件
import Home from "../views/Home.vue";
// 2. 注册VueRoter
Vue.use(VueRouter);
// 3. 创建一个VueRouter对象
const routes = [
{
path: "/", // 路由的路径
name: "Home", // 组件名称
component: Home // 关联的组件名称
},
{
path: "/about",
name: "About",
// 路由的懒加载写法，该组件会被延迟加载，推荐这样写
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue")
}
];
// new一个VueRouter
const router = new VueRouter({
mode: "history", // 指定用什么方式跳转路由
base: process.env.BASE_URL,
routes
});
// 4. 导出router对象
export default router;
- 在入口文件main.js中注册router
// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router"; // 导入router
Vue.config.productionTip = false;
new Vue({
router, // 注册router
render: h => h(App)
}).$mount("#app");
经过以上三个步骤就正式在项目中引入了vue-router,在代码中我都做了注释，大家看着注释了解下！其实当安装完vue-router,也就是步骤一之后，我们还可以通过一个命令自动帮我们引入这些，但前提是你必须实现备份原来的，否则会覆盖！
vue add router
VueRouter的基本使用
- 基本使用
老规矩，翠花上代码：
<!-- src/App.vue -->
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
这是vue-cli创建项目的时候默认在App.vue入口文件中自动生成的，可以看出，VueRouter 通过 router-link 组件来进行导航，通过 to属性指定导航的链接，<router-link> 默认会被渲染成一个<a> 标签。然后声明了一个router-view组件作为路由的出口，路由匹配到的组件将渲染到 <router-view></router-view>标签中。
那么这两个路由地址其实对应的就是我们在router/index.js中的routes中指定的路由列表！
- 代码方式跳转
以上例子还可以通过编码的方式使用路由！
老规矩，翠花上代码：
<!-- src/App.vue -->
<template>
<div id="app">
<div id="nav">
<!--
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
-->
<button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button>
</div>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
// 代码方式跳转
methods: {
homeClick(){
// this.$router.push('/')
this.$router.replace('/')
},
aboutClick(){
// this.$router.push('/about')
this.$router.replace('/about')
}
},
}
</script>
路由还可以通过在methods中定义一个方法来跳转路由，采用this.$router.push()或this.$router.replace()的方式注册!
- 区别：
🎉 $router.push();
本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录!
🎉 $router.replace();
替换路由，没有历史记录，点击返回，会跳转到上上一个页面!
感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"。码云上有我们开源的商城项目，知识付费项目，JAVA版全开源商城系统，学习研究欢迎使用，老铁顺手点个star呗，老板奖励五毛，分你两毛五，😂😂关注我们保持联系！
转载：https://blog.csdn.net/CRMEB/article/details/112898083