Vue2——单页应用程序路由的使用

一.单页应用程序与多页应用程序之间的比较

二.单页的应用场景

        系统类网站 / 内部网站 / 文档类网站 / 移动端网站

三.路由的介绍

        1. 什么是路由

                路由是一种映射关系

        2. Vue中的路由是什么

                路径和组件的映射关系

四.VueRouter的使用

        5个基础步骤（固定）

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

yarn/vue add vue-router@3.6.5 

        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文件夹

        ·复用组件 - 展示数据 - 常用于复用

六. 路由模块封装

·路由模块的封装抽离的好处是什么

        拆分模块，利于维护

以后如何快速引入组件

        基于@指代src目录，从src目录出发找组件

七. 使用router-link替代a标签实现高亮

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

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

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

·router-link-active模糊匹配（用的多）

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

·router-link-exact-active精准匹配

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

八. 自定义匹配类名

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

const router = new VueRouter({
    routes: [...],
    linkActiveClass: "类名1",
    linkExactActiveClass: "类名2"
})

九. 声明式导航 - 跳转传参

目标：在跳转路由时，进行传值

1. 查询参数传参

        1. 语法格式

                ·to='/path?参数名=值'

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

                ·$router.query.参数名

目标：在跳转路由时，进行传值

2. 动态路由传参

        1. 配置动态路由

const router = new VueRouter({
    routes: [
        ...,
        {
            path: '/search/:words',
            component: Search
        }
    ]
})

        2. 配置导航链接

                ·to="/path/参数值"

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

                ·$route.params.参数名

动态路由参数可选符

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

原因：/search/:words表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"?"

const router = new VueRouter({
    routes: [
        {path: '/', redirect: '/home'},
        {path: '/home', component: Home},
        {path: '/search/:words?', component: Search}
    ]
})

编程式导航-基本跳转

两种语法：

1. path路径跳转（简易方便）

this.$router.push('路由路径')

this.$router.push({
    path: '路由路径'
})

2. name命名路由跳转（适合path路径长的场景） 

this.$router.push({
    name: '路由名'
})

{name: '路由名', path: '/path/xxx', component: xxx},

编程式导航-路由传参

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

1.1 path路径跳转传参（query传参）

this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
    path: '/路径',
    query: {
        参数名1: '参数值1',
        参数名2: '参数值2'
    }
})

1.2 path路径跳转传参（动态路由传参）

this.$router.push('/路径/参数值')
this.$router.push({
    path: '/路径/参数值'
})

 2.1 name命名路由跳转传参（query传参）

this.$router.push({
    name: '路由名字',
    query: {
        参数名2: '参数值1',
        参数名2: '参数值2'
    }
})