vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue。
?SPA（Single Page Application）单网页应用，整个网站只有一个页面。
如何使用前端路由？
配置路由
第一种：在入口文件通过script标签src引入资源。
如：<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/4.0.13/vue-router.cjs.js" type="application/javascript"></script>
我们一般将包下载到项目中使用
第二种：下载vue-router包手动配置
首先?npm i vue-router --save下载到项目
然后在main.js入口文件中引入路由工具，并配置。如：
?import Vue from "vue"
?import VueRouter from "vue-router"//引入路由工具
?import App from "./App.vue"
?Vue.use(VueRouter)//注入路由,就是运行路由的相关函数和给vue绑定东西:比如$router
?
?//创建路由工具
?const router=new VueRouter({? ? ? ? mode:"history"//常用模式
?? ? //routes路由器 生成很多网址对应的切换组件
?? ? routes:[{path:"/home",component:()=>import("./home.vue")},
? ? ? ? ? ? ?{path:"/about",component:()=>import("./about.vue")}]
?})
?new Vue({
?? ? router,//把路由挂载到页面
?? ? render(h){return h(App)}
?}).$mount("#app")
第三种：（推荐使用！！）官方脚手架中vue create "项目名"? 创建项目时，选择路由功能，会帮我们自动配好。
官方配置vue-router，已经不在main.js入口文件中，而是为我们创建了一个router文件下的index.js文件专门配置，我们注册路由就在这里面注册就行了，其它都不用管导，什么导入导出就是配好了的。
使用路由
这里我们用到一个router-view标签，在App.vue文件的template模板中写上router-view标签，在页面加载时，这个标签会去判断当前网页的网址，显示对应网址（即寻找与我们注册路由的网址）的组件。
如：
注册了一个home路由：
{
path:"/",
name:"home",
component:()=>import('../views/home/index.vue')
}当网页中pathname为"/"时，就加载这个组件，这就是router-view标签的作用，通过判断网址加载对应的组件。
在App.vue文件中添加router-view标签，
<template>
<div class="app">
<h1>111</h1>
<router-view></router-view>
</div>
</template>页面效果：
?当浏览器网址没有匹配的路由它就router-view标签就相当于没有作用了，如果我们把网址改为/a
刷新页面：
?只显示了App组件自身的内容。