来学vue-router吧

发表于 | 分类于 |
字数统计: 937 | 阅读时长 ≈ 3

前言：webpack相关

  • webpack主要使用场景是单页面（SPA），而SPA的核心就是前端路由。

  • webpack配置中最重要也是必选的两项是入口和出口，入口：告诉webpack从哪里开始寻找依赖，并且编译。出口：用来配置编译后的文件存储位置和文件名

  • webpack-dev-server的热更新功能，它通过建立一个WebSocket连接来实时响应代码的修改。

  • webpack虽然概念比较新，但它只不过是一个js配置文件，四个概念：entry,output,loaders,plugins

  • 文件为<div>Hello</div> 执行npm run dev之后，打开控制台可以看到组件被替换为了<div data-v-whfefewuif>Hello</div>

之所以多了一串data-是因为使用了<style scoped>

  • scoped：目的是为了保证当前组件中的样式，只作用于当前组件，使得当前组件的样式得到保护。

其实现原理： vue通过在DOM结构以及css样式上加唯一不重复的标记，增加该组件中css样式的权重来实现

scoped设计的初衷就是不能让当前组件的样式修改其他任何地方的样式，也就是说只对当前组件有效

SPA就是在前后端分离的基础上，加上一层前端路由。

前端路由：即由前端来维护一个路由规则。有2种，一种是利用url的hash，就是常说的锚点#，JavaScript通过hashChange事件来监听url改变，IE7及以下需要轮询；另一种就是H5的History模式，使url看起来像普通网站一样 ，以“/“分割，但页面并没有跳转，这种模式需要服务端支持，服务端在接收请求后，都指向同一个html文件，不然会出现404。因此SPA只有一个html,整个网站所有的内容都在这一个html里，通过JavaScript来处理。

路由配置如下：

1
2
3
4
5
6
const Routers = [
    {
        path: '/index',
        component: (resolve) => require(['./views/index.vue'],resolve)
    }
]

webpack会把每一个路由都打包为一个js文件，在请求到该页面的时候，才会去加载这个页面的js，也就是异步实现的懒加载（按需加载）,使用了异步路由之后，编译出的每个页面的js都叫chunk，可以在webpack配置的出口output里通过设置chunkFilename字段修改chunk命名。

如果非要一次性加载component: require('./views/index.vue')

跳转

有2种方式

  • 一种是使用内置的<router-link>

它在H5的History模式下会拦截点击，避免浏览器重新加载页面。它的一些prop: to,tag,replace(不会留下历史记录，所以导航后不能用后退键返回上一个页面)

  • 第二种是使用router实例的方法，这种适用于跳转页面需要在JS里进行，类似于window.location.href。

比如在about.vue里，通过点击事件跳转：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//about.vue
<template>
	<div>
        <h1>
            介绍一下
        </h1>
        <button @click="handleRouter">
            跳转到user
        </button>
    </div>
</template>
<script>
	export default {
        methods: {
            handleRouter() {
                this.$router.push('/user/123')
            }
        }
    }
</script>

$router还有一些方法：

- replace :不会像history添加新记录，而是替换掉当前的记录
- go:向前向后

beforeEach和afterEach

vue-router提供了导航钩子beforeEach和afterEach。它们分别在路由即将改变前和改变后触发，使用语法：

1
2
3
4
5
const router = new VueRouter(RouterConfig)
router.beforeEach((to,from,next) => {
    //coding
    next()
})

导航钩子有3个参数：

  • to 即将要进入的目标的路由对象
  • from 当前导航即将要离开的路由对象
  • next 调用该方法后，才能进入下一个钩子