单页应用程序&路由#

单页应用程序 SPA-Single Page Application#

• 单页面应用（SPA）：所有功能在一个 html 页面上实现
• 具体示例：网易云音乐https://music.163.com/
  多页面应用比如京东淘宝

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

单页面应用：系统类网站/内部网站/文档类网站/移动端站点
多页面应用：公司官网/电商类网站

路由#

单页应用程序开发效率高，性能好，用户体验好，最大的原因就是：页面按需更新
要按需更新，首先就需要明确：访问路径和组件的对应关系，就需要用到路由
生活中的路由：设备和 ip 的映射关系
Vue 中的路由：路径和组件的映射关系
首页 http://localhost:8080/#/home
评论 http://localhost:8080/#/comment
搜索 http://localhost:8080/#/search
不同的路径对应着不同的组件
根据路由就能知道不同路径应该匹配渲染哪个组件

VueRouter 插件#

作用：修改地址栏路径时，切换显示匹配的组件
说明：Vue 官方的一个路由插件，是一个第三方包
官网：https://v3.router.vuejs.org/zh/

VueRouter 的使用（5+2 步）#

以我的音乐应用为例
效果如下：
发现音乐组件 Find.vue：

我的音乐组件 My.vue:

朋友组件 Friend.vue:

5 个基础步骤（固定）

1. 下载：下载VueRouter模块到当前工程，版本 3.6.5（vue2 对应的 VueRouter 版本）

npm add vue-router@3.6.5

2. 引入

在main.js中引入

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 目录），配置路由规则

组件：Find.vue、My.vue、Friend.vue
路由规则：

import Find from './views/Find.vue';
import My from './views/My.vue';
import Friend from './views/Friend.vue';
const router = new VueRouter({
    // 规则，路径匹配组件
    routes: [
        { path: '/find', component: Find },
        { path: '/my', component: My },
        { path: '/Friend', component: Friend },
    ],
});

引入时可能报错，命名规范要求组件名由多个单词组成
这里是一个单词的组件名，在各个组件配置中添加 name 即可
如：
My.vue:

export default {
    name: 'MyMusic',
};

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

<div class="footer_wrap">
    <a href="#/find">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/friend">朋友</a>
</div>
<div class="top">
    <!-- router-view:vue内置组件，放在哪里就在哪里显示 -->
    <router-view></router-view>
</div>

组件存放目录问题#

注意：.vue文件本质上无区别
路由相关的组件，放在views目录下是为了组件分类
组件分类：.vue 文件分 2 类（页面组件&复用组件）

• src/views文件夹
  • 页面组件-页面展示-配合路由用
• src/components文件夹
  • 复用组件-展示数据-常用于复用

分类开来更易维护

完整代码：
App.vue:

<template>
    <div>
        <div class="footer_wrap">
            <!-- 2.2.准备导航链接，配置路由出口（匹配的组件展示的位置） -->
            <a href="#/find">发现音乐</a>
            <a href="#/my">我的音乐</a>
            <a href="#/friend">朋友</a>
        </div>
        <div class="top">
            <!-- 路由出口：匹配的组件所展示的位置 -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {};
</script>

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .footer_wrap {
        position: relative;
        left: 0;
        top: 0;
        display: flex;
        width: 100%;
        text-align: center;
        background-color: #333;
        color: #ccc;
    }
    .footer_wrap a {
        flex: 1;
        text-decoration: none;
        padding: 20px 0;
        line-height: 20px;
        background-color: #333;
        color: #ccc;
        border: 1px solid black;
    }
    .footer_wrap a:hover {
        background-color: #555;
    }
</style>

main.js:

import Vue from 'vue';
import App from './App.vue';

// 路由的使用步骤 5+2
// 5个基础步骤
// 2个核心步骤

// 1.1.下载v3.6.5
// 1.2.引入
import VueRouter from 'vue-router';
import Find from './views/Find.vue';
import My from './views/My.vue';
import Friend from './views/Friend.vue';

// 1.3.安装注册 Vue.use(插件)
Vue.use(VueRouter); // VueRouter插件初始化
// 1.4.创建路由对象
const router = new VueRouter({
    // 2.1.建组件，配规则
    // 每条route:{path:路径,component:组件}
    routes: [
        { path: '/find', component: Find },
        { path: '/my', component: My },
        { path: '/friend', component: Friend },
    ],
});

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    // 1.5.注入到new vue中，建立关联
    router: router,
}).$mount('#app');

Find.vue/My.vue/Friend.vue:

<template>
    <div>
        <p>发现音乐</p>
        <!-- <p>我的音乐</p> -->
        <!-- <p>朋友</p> -->
    </div>
</template>
<script>
    export default {
        name: 'FindMusic',
        // name: 'MyMusic',
        // name: 'MyFriend',
    };
</script>
<style lang="less" scoped></style>