认识Vue中的路由

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组件自身的内容。