zoukankan      html  css  js  c++  java
  • 393 vue路由介绍,路由的基本使用

    零、路由介绍

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

    一、路由的基本使用

    准备工作 (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>
    


  • 相关阅读:
    大数据的前景?
    PriorityBlockingQueue深度解析(好文)
    深入CAS原理
    common-lang3工具类-使用手册
    gitlab搭建
    RestTemplate转码bug
    论tigergraph边的方向性
    关于java的wait方法的深入分析
    openjdk的源码下载方式
    一个奇怪的urlencode转码问题
  • 原文地址:https://www.cnblogs.com/jianjie/p/12539442.html
Copyright © 2011-2022 走看看