【Vue】路由

       📝个人主页：五敷有你      

 🔥系列专栏：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:{
            
    }
})