零、路由介绍

  • 路由 ： 是浏览器 URL 中的哈希值( # hash) 与 展示视图内容 之间的对应规则。
  • 简单来说，路由就是一套映射规则(一对一的对应规则)， 由开发人员制定规则.
  • 当 URL 中的哈希值( # hash) 发生改变后，路由会根据制定好的规则， 展示对应的视图内容
  • 为什么要学习路由?
  • 在 web App 中， 经常会出现通过一个页面来展示和管理整个应用的功能.
  • SPA 往往是功能复杂的应用，为了有效管理所有视图内容，前端路由 应运而生.
  • vue 中的路由 ： 是 hash 和 component 的对应关系， 一个哈希值对应一个组件

一、路由的基本使用

准备工作 (3个)

  • 安装 ： npm i vue-router
  • 引入 ：
<script src="./vue.js"></script>
// 千万注意 ：引入路由一定要在引入vue之后，因为vue-router是基于vue工作的
<script src="./node_modules/vue-router/dist/vue-router.js"></script>


  • 实例路由对象 + 挂载到vue上
  • 实例路由对象 ： const router = new VueRouter()
  • 挂载到vue上 ： new Vue({ router，data，methods })
  • 验证路由是否挂载成功， 就看打开页面，最后面有没有个 #/

具体步骤 (4个)

  • 1.入口
  • 2.路由规则
  • 3.组件
  • 4.出口
# 1. 入口
// 方式1 ： url地址为入口   调试开发用
输入url地址 改变哈希值 `01-路由的基本使用.html#/one`  
// 方式2 ： 声明式导航 ： router-link + to (见下面介绍)
     
# 2. 路由规则
// path ： 路由路径
// component ： 将来要展示的路由组件
routes： [
    { path： '/one'， component： One }， 
    { path： '/two'， component： Two }
]

# 3. 组件
// 使用返回值的这个组件名称
const One = Vue.component('one'， {
  template： ` <div> 子组件 one </div> `
})

# 4. 出口
<!--  出口 组件要展示的地方-->
<router-view></router-view>

# 总结
拿到入口哈希路径， 根据路由匹配规则，找到对应的组件，显示到对应的出口位置

01-路由的基本使用.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- 
        准备工作 (3个)
        1. 安装路由 npm i vue-router
        2. 引入路由
        3. 实例化路由 + 挂载到vue上
        
        具体步骤 (4个)
        1. 入口  (哈希值) 手动在url上写  /one
        2. 规则  routes 
        3. 组件 
        4. 出口
    -->

    <div id="app">
        <!-- 第四步 : 出口 占位置 【出口router-view在哪里，就在哪里显示组件。】【vue-router.js中内置了vueRouter】 -->
        <router-view></router-view>
    </div>

    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 第三步 : 路由组件 【路由组件要写在路由实例对象前，否则报错。】
        // 【和路由配合的时候，【局部】组件就不需要到 Vue实例 中注册了。】
        const One = {
            template: `<div>one组件</div>`
        }

        // 实例化路由
        const router = new VueRouter({
            // 第二步 : 路由的匹配规则 一个哈希值 对应一个组件
            routes: [{
                path: '/one',
                component: One
            }]
        })

        const vm = new Vue({
            router,
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>


393 vue路由介绍，路由的基本使用_开发人员