zoukankan      html  css  js  c++  java

  • webpack入坑之旅（六）配合vue-router实现SPA

    在上面的练习当中我们已经成功的加载了一个.vue格式的单文件组件，并且实现了在使用vue情况下的自动刷新。

    但是我们最终的目的还是要实现单页面应用程序，这个时候我们就必不可少的需要使用到路由管理器来进行SPA的开发，vue官方为我们提供了一个官方库vue-router，并且配有对应的中文文档。关于里面的内容大家自行前去观看。在这里，只会把我们需要的东西拿出来讲。

    vue组件

    官网对于组件讲解

    在Vue中定义一个组件非常简单，只需要一对自定义标签，在其中填入内容就可以进行我们的组件编写了，然后使用Vue.component()去注册我们的组件下面来看一个例子，来直观的看看vue的组件。

    组件入门

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    		 
        <script src="js/vue.js"></script>
    <body>
        <div id="app">
            <my-component></my-component>
            <!-- 自定义标签作为组件名称 -->
            <my-component></my-component>
            <!-- 复用 -->
        </div>
        <script>
            // 定义并且注册组件
            // 在官方的示例中使用 Vue.extend({})先注册了一个定义模板，再引用，看个人喜好吧
            Vue.component("my-component", {
                template:"<h2>hello Vue component</h2>"
            })
            // 创建根实例
            // 在这里 定义并且注册组件 必须创建根实例前，不然会报错，因为解析顺序的问题？
            new Vue({
                el:"#app"
            });
        </script>
    </body>

    上面就是最简单的定义组件的方式，template属性中写的东西:就是<my-component>这个自定义标签渲染后展现出来的样式，这里渲染为：

    1
    2
    3
    4
    		 
    <div id="app">
        <h2>hello Vue component</h2>
        <h2>hello Vue component</h2>
    </div>

    组件的基础介绍就到这，更多详细内容请移步官网,有着非常清晰的讲解。

    vue-router

    刚刚已经对于vue的组件有了一定的了解。现在来结合vue-router，来进行一下动态的切换。

    首先是安装，如果使用npm的形式的话，直接运行npm install vue-router --save,就可以看到vue-router，已经被添加到了项目依赖中。直接上ES6的语法来进行引入

    1
    2
    3
    		 
    import Vue from "vue";
    import VueRouter from "vue-router";
    Vue.use(VueRouter);

    起步

    其实这一部分vue-router的中文文档中已经讲的非常详细了。。在这里与它不同的是它用的CommonJS的规范来进行模块安装，而我使用ES6的import，有兴趣自己去看- -。其他的内容我就直接扒下来了。

    html:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用指令 v-link 进行导航。 -->
        <a v-link="{ path: '/foo' }">Go to Foo</a>
        <a v-link="{ path: '/bar' }">Go to Bar</a>
      </p>
      <!-- 路由外链 -->
      <router-view></router-view>
    </div>

    javascript:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    		 
    // 定义组件
    var Foo = Vue.extend({
        template: '<p>This is foo!</p>'
    })
    var Bar = Vue.extend({
        template: '<p>This is bar!</p>'
    })
    // 路由器需要一个根组件。
    // 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
    var App = Vue.extend({})
    // 创建一个路由器实例
    // 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
    var router = new VueRouter()
    // 定义路由规则
    // 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
    // 创建的组件构造函数，也可以是一个组件选项对象。
    // 稍后我们会讲解嵌套路由
    router.map({
        '/foo': {
            component: Foo
        },
        '/bar': {
            component: Bar
        }
    })
    // 现在我们可以启动应用了！
    // 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
    router.start(App, '#app')

    我个人感觉这部分还是很好理解的，官方也给了一系列的例子：查看仓库的 README.md 来运行它们。很好的展现了它的路由切换。

    简单的介绍到这，下面最重要的部分到了，看看如何结合我们定义的.vue单文件组件。

    首先来看我们的文件目录结构：

    01-webpack-vuerouter

    定义路由规则

    最主要是main.js 的变化，直接在文件中讲解了：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    		 
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    // 引入vue以及vue-router的。
    // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来

    // 引入组件！
    import App from './App.vue'
    import Index from './components/index.vue'
    import List from './components/list.vue'
    import Hello from './components/hello.vue'

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      {
        path: '/index',
        component: Index,
        children: [
            { path: 'hello', component: Hello }
        ]
      },
      {
        path: '/list',
        component: List
      },
      {
        path: '*',
        redirect: '/index'
      }
    ]

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

    // 现在，应用已经启动了！

    App.vue 需要有用于渲染匹配的组件，如下

    1
    2
    3
    		 
    <template>
        <router-view></router-view>
    </template>

    现在当我们运行 npm start 进入http://localhost:8080/就会自动跳转到http://localhost:8080/#/index，并且读取里面的内容。

    实现路由跳转

    主要抽出index.vue中的内容来讲解，的内容是：(list.vue里面的内容自行设置查看吧)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    		 
    <template>
    <div>
        <h1>姓名：{{name}}</h1>
        <h2>{{age}}</h2>
        <button @click="golist">$route.push查看</button>
        <router-link :to="{ path: '/list' }">v-link查看列表</router-link>
        <router-link :to="{ path: '/index' }">回去主页</router-link>
        <router-link :to="{ path: '/index/hello' }">嵌套的路由</router-link>
        <hello></hello>
        <router-view></router-view>
    </div>
    </template>
    <script>
        // import hello from "./hello.vue"
        export default {
            data () {
                return {
                    name:"guowenfh",
                    age:"21"
                }
            },

            methods :{
                golist (){
                    this.$router.push({path:"/list"})
                    // this.$route.router.go({name:"list"});
                }
            }
        }
    </script>
    <style></style>
    <!-- 样式自行设置，或者直接看源码就好 -->

    因为自刷新的缘故，直接切换到浏览器。

    点击上面使用的router-link，与this.$router.push的方式都可以跳转到list定义的路由。（观察浏览器地址栏的变化）在这里我们使用 { path: '/list' } ,如有别名的话，使用的{name:"list"}，会有同样的效果。

    Vue组件的嵌套

    在第一小点里面我们看到了在页面内的组件的使用方法，第二小点中学习到了vue-router的制定路由规则。

    看过这两个地方之后，我们把思维发散开来，应该就能触类旁通的想到如何在页面中嵌套加载别的组件了。
    我们创建一个hello.vue ，里面内容随意。现在我们如果要在app.vue中加载它，那么只需要在app.vue中使用import hello from "./hello.vue"（其实这个达到了使用require两步的效果。引入赋值）。

    引入之后，只需要如下注册：

    1
    2
    3
    4
    5
    6
    		 
    export default {
        //其它的就
        components:{
            hello//若还有更多的组件，只需要在import的情况下，以逗号分割，继续注册就好
        }
    }

    最后在app.vue中添加<hello></hello>这一对自定义标签，就可以实现加载hello.vue中的内容。

    组件的嵌套也就是这样，很简单的描述完了，但是怎么样去抽离组件，在工作中积累可以复用的组件才是我们真正需要去思考的。

    那么先到这，关于组件之间通信的问题，留到以后慢慢了解。

    路由嵌套

    还是刚刚的代码与目录结构，我们已经实现了组件之间的嵌套，但是有时并不希望组件直接就加载进来，而是在用户点击后才展现在页面中，这是就需要使用到路由嵌套。

    为了偷懒，这里就直接使用hello.vue。实现嵌套路由主要有以下几步：

    第一步：制定嵌套路由规则：

    看main.js下面这部分的代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    		 
    {
      path: '/index',
      component: Index,
      // 在/index下设置一个子路由
      children: [
           // 当匹配到/index/hello时，会在index的<router-view>内渲染
          {
              path: 'hello',
              name:'hello',//可有可无，主要是为了方便使用
              // 一个hello组件
              component: Hello
          }
      ]
    }

    第二步：在组件中添加<router-view>

    来自官网的解释：<router-view> 用于渲染匹配的组件，它基于Vue的动态组件系统，所以它继承了一个正常动态组件的很多特性。

    将<router-view>写在app.vue的<template></template>标签中。

    第三步：写入跳转路径

    还是在index.vue中：

    1
    2
    3
    		 
    <router-link :to="{ path: '/index' }">回去主页</router-link>
    <!-- 点击这两个标签就会实现页面内的切换效果 -->
    <router-link :to="{ path: '/index/hello' }">嵌套的路由</router-link>

    ，切换到浏览器，点击该嵌套的路由即可让hello.vue中的展现出来，在这里直接使用了router-link来实现跳转 ，当然$router.push同理。（注意在点击两个不同的文字时，地址栏的变化，以及展现内容的切换）

    注意：

    记录 vue-webapck 的学习基础，代码示例 github地址

    这个教程更多的是从基础开始学习，vue 与 webpack 应该要怎么结合。在真实的实际项目中，还是推荐 vue-cli。

    关于 vue-cli 生成的配置解析可以参考一下 vue-cli#2.0 webpack 配置分析

    在我的源码中是在<style scoped></style>标签中定义样式的，请注意scoped的使用，它表示在该style中定义的样式只会在当前的组件中起到效果，而不会去影响全局的css样式。

    最简单的理解应该就是：

    未写该scoped属性的所有组件中的样式，在经过vue-loader编译之后拥有全局作用域。相当于共用一份css样式表。

    而写了该属性的的组件中定义的样式，拥有独立作用域。相当于除去引入了公用的一份css样式表外，但单独拥有一份css的样式表。
  • 相关阅读:
    url参数的获取
    ajax变量作用域的问题
    滚动条自适应宽度的问题
    js发送验证码（倒计时）
    字符串
    值类型和引用类型
    面向对象
    进程
    UI事件
    鼠标跟随
  • 原文地址：https://www.cnblogs.com/ghyes/p/9429594.html
Copyright © 2011-2022 走看看