📝个人主页：五敷有你      

 🔥系列专栏：Vue

⛺️稳中求进，晒太阳

目录

路由

单页应用程序

        总结：

VueRouter

核心步骤：

组件存放目录的问题

路由的封装

声明式导航

声明式导航 - 导航链接

声明式导航 - 两个类名

声明式导航-跳转传参

查询参数传参

动态路由传参

Vue路由的-重定向

Vue路由-404

Vue路由-模式设置

编程式导航 - 基本跳转

---

路由

单页应用程序

单页面应用:(SPA):所有功能在 一个html页面上 实现

开发分类	实现方式	页面性能	开发效率	用户体验	学习成本	首屏加载	SEO
单页	一个html	按需更新 性能高	高	非常好	高	慢	差
多页	多个html页面	整页更新 性能低	中等	一般	中等	快	优

• 单页面应用： 系统网站，内部网站，文档网站，移动端站点
  • 具体实例：网易云
• 多页面应用： 公司官网，电商类网站

总结：

• 单页面应用程序之所以开发效率高，性能高，用户体验好 最大原因就是：页面按需更新
• 按需更新，首先需要明确: 访问路径和组件的对应关系---路由

生活中的路由：设备和ip的映射关系

Vue中的路由： 路径和组件的映射关系

VueRouter

作用：修改地址栏路径时，切换显示匹配的组件

说明：Vue官方的一个路由插件，是一个第三方包

使用步骤：（写在main.js）

        1. 下载：下载VueRouter 模板到当前工程 版本3.6.5

yarn add vue-router@3.6.5
npm i vue-router@3.6.5

        2. 引入

import VueRouter from 'vue-router'

         3 .安装注册

Vue.use(VueRouter)

        4. 创建路由对象

const router=new VueRouter()

        5.注入，将路由对象注入到newVue实例中，建立关联

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

核心步骤：

        1.创建需要的组件(views目录),配置路由规则

import Find from './views/Find.vue'
import Find from './views/Find.vue'
import Find from './views/Find.vue'const router=new VueRouter({routes:[{path:"/find",component:Find},    {path:"/find",component:Find},    {path:"/find",component:Find},    ]
})

        2.配置导航，配置路由出口（路径匹配的组件的位置）

                <router-view></router-view>确定显示的位置

<div class="footer_warp"><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">朋友</a>
</div>
<div><router-view></router-view>
</div>

组件存放目录的问题

注意：.vue文件 本质无区别

路由相关的组件，为什么放在views目录呢？

组件分类

• 页面组件 - 页面展示 - 配合路由用 -view层
• 复用组件 - 展示数据 - 常用于复用 -components层

路由的封装

问题：所有的路由都堆在main.js中合适么？

目标：将所有的模块抽离出来

好处：拆分模块

封装到router/index.js下

import myMusic from '@/components/myMusic.vue'
import myFriends from '@/components/myFriends.vue'
import findMusic from '@/components/findMusic.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
<!--VueRouter组件的初始化-->
Vue.use(VueRouter)
<!--创建一个路由对象-->
const router=new VueRouter({routes:[//router 路由规则//route 一条路由规则{path:"路径",component:组件名}{path:"/my",component:myMusic},{path:"/find",component:findMusic},{path:"/friend",component:myFriends},]
})<--导出路由-->
export default router;

之后再在main.js中导入

import router from './router/index'

声明式导航

声明式导航 - 导航链接

vue-router提供了一个全局组件router-link(取代a标签)

1. 能跳转：配置to属性指定路径(必须)，本质还是a标签，to无需#

   <router-link to="find">发现音乐</router-link><router-link to="friend">我的朋友</router-link><router-link to="my">我的音乐</router-link>

1. 能高亮：默认就会提高高亮类名，可以直接设置高亮样式
   1. 有.router-link-active
   2. 有。router-link-exact-active

   <router-link to="find" class="router-link-exact-active  router-link-active">发现音乐</router-link><router-link to="friend">我的朋友</router-link><router-link to="my">我的音乐</router-link>

声明式导航 - 两个类名

router-link自动给当前导航添加了两个高亮类名

1.router-link-active 模糊匹配(用的多)

                to="/my" 可以匹配 /my /my/a /my

2.router-link-exact-active 精确匹配

                to="/my" 仅可以匹配 /my

 

声明式导航-跳转传参

目标:在跳转的路由的时候传参

1. 查询参数传参

   1. 语法格式如下
      1. to="/to"?参数名=值"

 <div class="nav"><router-link to="find?key=发现音乐">发现音乐</router-link><router-link to="friend?key=我的朋友">我的朋友</router-link><router-link to="my?key=我的音乐">我的音乐</router-link></div>

1. 对应页面组件接受传递过来的值
   1. $route.query.参数名.

<template><div class="main"><h1>{{ $route.query.key }}</h1><p>朋友的音乐</p><p>朋友的音乐</p><p>朋友的音乐</p><p>朋友的音乐</p></div>
</template>

动态路由传参

1. 配置动态路由
   1. {path:"/my/:word",component:myMusic},

const router=new VueRouter({routes:[{path:"/my/:word",component:myMusic},{path:"/find/:word",component:findMusic},{path:"/friend/:word",component:myFriends},]
})

       2. 配置导航链接

            to="path/参数值"

<router-link to="/my/我的音乐">我的音乐</router-link>

         3.对应页面组件接受传递过来的值

                $route.params.参数名

  <h1>{{ $route.params.word }}</h1>

Vue路由的-重定向

问题：网页打开，url默认时是/路径，未匹配到组件时，会出现空白

说明：重定向 →匹配path后，强制跳转path路径

语法：{path:匹配路径,redirect:重定向的路径}，

const router=new VueRouter({routes:[{path:"/",redirect:"/find/爱你"},{path:"/my/:words",component:myMusic},{path:"/find/:words",component:findMusic},{path:"/friend/:words",component:myFriends},]
})

Vue路由-404

作用:当路径找不到匹配时，给个提示页面

位置：配置路由的最后

语法：path:"*"(任意路径)-前面不匹配就命中最后一个

const router=new VueRouter({routes:[{path:"/",redirect:"/find/爱你"},{path:"/my/:words",component:myMusic},{path:"/find/:words",component:findMusic},{path:"/friend/:words",component:myFriends},{path:"*",component:NotFind},]
})

Vue路由-模式设置

问题：路由的路径带有#,能否真正切成路径形式

hash路由(默认) 例如： http://localhost:8080/#/home

history路由(常用) 例如： http://localhost:8080/home

 在index.js中

const router=new VueRouter({mode:"history",routes:[{path:"/",redirect:"/find/爱你"},{path:"/my/:words",component:myMusic},{path:"/find/:words",component:findMusic},{path:"/friend/:words",component:myFriends},{path:"*",component:NotFind},]
})

编程式导航 - 基本跳转

问题：点击按钮怎么跳转

编程式导航，用js代码跳转

两种语法：

1. path 路径跳转

简单写法：
this.$router.push("/路由路径")
复杂写法：
this.$router.push({path:'/路由路径',
})

query传参

简写：
this.$router.push('/路径?参数1=值,参数2=值,参数3=值')完整写法：
this.$router.push({path:"/路径"，query:{参数名1:"值"，参数名2:"值"}
})
对应取值<h1>{{ $route.query.key }}</h1>

动态传参

简写：
this.$router.push("/路径/${this.inpValue}")
完整写法：
this.$router.push({path:"路径/关键词"
})//取值
this.$route.param.words

name 命名路由跳转(适合path路径长的场景)

{name:'路由名',path:'/path/xxx',component:xxx}
//query传参
this.$router.push({name:"路由名",query:{}
})
//动态路由传参
this.$router.push({name:"路由名",param:{}
})