Vue.js - 前端路由的概念与原理

前端路由的概念与原理

1. URL：

1.1 什么是URL?

URL（Uniform Resource Locator，统一资源定位符）用于定位网络上的资源

1.2 URL的组成部分？

格式：协议://主机号 : 端口号/路径 ? 参数

示例：https://www.euphoria:8083/images/cat.png?name=ls#abc

1.3 Hash:

• “#” 号后面的部分，专业术语为 “Hash地址”
• Hash 地址发生变化，不会导致浏览器页面的刷新
• Hash 地址发生变化，会形成浏览器历史记录
• vue 就是基于 hash 的这些特性来做路由的跳转，实现页面切换

2. 应用类型与路由的概念：

多页应用与后台路由：多页应用中，想要切换页面就是跳转到一个新的 html 页面，路由工作是由后端完成的

单页应用与前端路由：只有唯一的一个 HTML 页面，想要 切换页面只能切换组件，这种切换组件达到页面切换的效果，就是 前端路由

前端路由：访问不同的 hash 地址，显示不同的组件

2.1 前端路由的工作方式

① 用户 点击 了页面上的 路由链接

② 导致了 URL 地址栏 中的 Hash 值 发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件 渲染到浏览器中

强调：前端路由，指的就是 Hash 地址 和 组件 之间的关系

Vue - router 的基本使用

1. 什么是 Vue - router

vue-router 是 vue.js 官方给出的 路由解决方案 。

vue-router 的官方文档地址：https://router.vuejs.org/zh/

2. vue - router 的使用步骤

① 安装 vue-router 包

1. npm i [email protected] -S  	     2. npm i  		 3. npm run serve

② 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块 ，并初始化代码
<script>
	// 1. 引入 Vue 和 VueRouter 的包
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 2. 调用 Vue.use() 函数，把 VueRouter 安装为插件
    Vue.use(VueRouter)
    
    // 3. 创建路由的实例对象
    const router = new VueRouter();
    
    // 4. 导出路由实例对象
    export default router
</script>

③ 挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块
<script>
    //1. 导入路由模块
    import router from '@/router/index.js'
    
	new Vue({
      
      
        render: h => h(App),
        // 2. 挂载路由模块
        router
    }).$mount('#app')
</script>

④ 配置路由规则

在 src/router/index.js 路由模块中，通过 routes数组 声明路由的匹配规则
<script>
	// 引入要显示的组件
    import Home from '@/componments/Home.vue'
    import Movie from '@/componments/Movie.vue'
    import About from '@/componments/About.vue'
    
    const router = new VueRouter({
      
      
        // 使用 routes 选项配置路由规则
        // 路由规则：hash 地址和对应的组件
        routes:[
            // {path:'hash地址',component:Home}
            // 注意：path 里面的 hash 地址是不需要加 # 的
            {
      
      path:'/home',component:Home},
            {
      
      path:'/movie',component:Movie},
            {
      
      path:'/about',component:About}
        ]
    })
</script>

⑤ 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明 路由链接 和 路由占位符
<template>
	<div class="app-container">
        <h1>App 根组件</h1>
        
        <!-- 声明路由跳转链接 -->
        <router-link to="/home">首页</router-link>
        <router-link to="/movie">电影</router-link>
        <router-link to="/about">关于</router-link>
        
        <hr />
        
        <!-- 声明路由占位符 -->
        <router-view></router-view>
    </div>    
</template>
<script>
	    
</script