VueRouter

介绍

目标：认识插件VueRouter，掌握VueRouter的基本使用步骤

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

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

官网：VueRouter官方中文网站

VueRouter的使用

5个基本步骤

1.下载：下载VueRouter模块到当前工程，vue2用3.x版本，vue3

用4.x版本

npm install vue-router@3

2.引入

import VueRouter from 'vue-router'

3.安装注册

Vue.use(VueRouter)

4.创建路由对象

const router = new VueRouter()

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

new Vue({

  render: h => h(App),

  router

}).$mount('#app')

2个核心步骤

（1）创建需要的组件（views目录），配置路由规则

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

组件存放目录问题（组件分类）

分类开来更易维护

src/views文件夹

        页面组件-页面展示-配合路由用

src/components文件夹

        复用组件-展示数据-常用与复用

路由的封装抽离

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

目标：将路由模块抽离出来。好处：拆分模块，利于维护

声明式导航-导航连接

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

（1）能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#

（2）能高亮，默认就会提供高亮类名，可以直接设置高亮样式

声明式导航-两个类名

说明：我们发现router-link自动给当前导航添加了两个高亮类名

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

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

(2)router-link-exact-active 精确匹配

          to="/my" 仅匹配 /my

说明：router-link 的两个高亮类名太长了，我们希望定制

声明式导航-跳转传参

目标：在跳转路由是，进行传参

1.查询参数传参

        （1）语法格式如下

                to="path?参数名=值"

         （2）对应页面组件接收传递过来的值

                $route.query.参数名

        （js中用this.$route.query.参数名来调用数据）

2.动态路由传参

       （1）配置动态路由

（2）配置导航链接

        to="/path/参数值"

(3)对应页面组件接收传递过来的值

        $route.params.参数名

区别

1.查询参数传参（比较适合传多个参数）

（1）跳转：    to="path?参数名=值&参数名2=值"

（2）获取： $route.query.参数名

2.动态路由传参（优雅简洁，传单个参数比较方便）

（1）配置动态路由：path："/path/参数名"

（2）跳转：   to="/path/参数值"

（3）获取： $route.params.参数名

动态路由参数可选符

问题：配了路由path："/path/参：words"为什么按下面步骤操作，会未匹配搭配组件，显示空白？

原因：/path/:words 表示，必须要传参数。如果不传参数，也希望能够匹配，可以加个可选符“？”

Vue路由-重定向（redirect）

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

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

语法：{path：匹配路径}

Vue路由-404（*）

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

位置：配在路由最后

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

Vue路由-模式设置（#）

问题：路由的路径看起来不自然，有#，能否切成真正路径形式？

hash路由（默认） 例如：http://localhost:8080/#/home

history路由（常用） 例如：http://localhost:8080/home（上线后需要服务端支持）

编程式导航-基本跳转

问题：点击按钮跳转如何实现？

编程式导航：用js代码来进行跳转

两种语法：

（1）path路径跳转

（2）name 命名路由跳转（适合路径较长）

编程式导航-传参跳转

问题：点击搜索按钮，跳转需要传参如何实现？

两种传参方式：查询参数+动态路由传参

（1）查询参数

（2）name路由跳转传参（query传参）

（3）name路由传参（动态路由传参）