前端路由与vue-router的基本用法

一、什么是前端路由？

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

前端路由的优点很多，比如页面的持久性，像大部分音乐网站，你都可在播放歌曲的同事跳转到别的页面，而音乐没有中断。再比如前后端彻底分离。前端路由更多时候时结合具体的框架来使用，比如Angular的ngouter，React的ReactRouter和vue的vue-router。

二、vue-router 的基本用法

1、在项目根目录新建一个router，安装vue-router

npm i –save vue-router

2、在入口文件main.js里面使用Vue.use( )加载插件：

import Vue from ‘vue ’

import VueRouter from ‘vue-router’

import App from ‘./app.vue’

3、每个页面对应一个组件，也就是对应一个.vue文件。在router目录下创建views目录，用于存放所有页面，然后再views里面创建index.vue 和 about.vue两个文件：

// index.vue

<template>

<div>首页</div>

</template>

<script>

export default { }

</script>

//about.vue

<template>

<div>介绍页</div>

</template>

<script>

export default { }

</script>

4、再回到main.js里，完成路由的配置

const Router = [

{

path: ‘/index’,

component: (resolve) => require([‘./views/index.vue’], resolve)

},

{

path: ‘/about’,

component: (resolve) => require([‘./views/about.vue’], resolve)

}

]

Routers里每一项的path属性就是指定当前匹配的路径，component是映射的组件，上例的写法，webpack会把每一个路由都打包为一个js文件，在请求该页面时，才去加载这个页面的js，也就是异步实现的懒加载（按需加载）。

5、然后再main.js里面完成路由的其他配置和路由实例

const RouterConfig = {

// 使用HTML5的history模式

mode: ‘history ’,

routers: Routers

}

const router = new VueRouter(RouterConfig)

new Vue({

el: ‘#app’,

router: router,

render: h => {

return h(App)

}

})

6、配置好了这些后，最后在根实例app.vue里添加一个路由视图<router-view>来挂载所有的路由组件：

<template>

<router-view></router-view>

</template>

<script>

export default { }

</script>

运行网页时，<router-view>会根据当前路由动态渲染不同页面组件，网页中一些公共部分，比如顶部的导航栏，侧边导航栏，底部版权信息，这些也可以直接写在app.vue里，与<router-view>同级，路由切换时，切换的是<router-view>挂载的组件，其他内容并不会发生变化。

运行npm run dev 启动服务，然后访问localhost:8080/index和 localhost:8080/about就可以访问这两个页面了。

在路由列表里，可以在最后新加一项，当访问的路径不存在时，重定向到首页：

const Routers = [

{

path: ‘*’,

redirect: ‘/index’

}

]

这样，访问localhost:8080 就自动跳转到了localhost:8080/index页面了。

路由列表的path也可以带参数，比如个人主页的场景，路由一部分是固定的，一部分是动态的： /user/123456, 其中id “123456”就是动态的，但它们路由到同一个页面，在这个页面里，期望获取这个id，然后请求相关数据，在路由里可以这样配置参数：

// main.js

const Routers = [

{

path: ‘/user/:id’,

componet: (resolve) => require([‘./views/user.vue’], resolve)

},

{

path: ‘*’,

redirect: ‘/index’

}

]

// 在router/views目录下，新建user.vue文件

<template>

<div>{{ $route.params.id }}</div>

</template>

<script>

export default {

mounted () {

console.log(this.$route.params.id)

}

}

</script>

这里的this.$route可以访问到当前路由的很多信息，可以打印出来看看都有什么，在开发中会经常用到里面的数据。

因为配置的路由是 “/user./id”, 所以直接访问localhost:8080/user会重定向到/index,需要带一个id才能到user.vue，比如locahost:8080/user/123456

三、路由跳转

1、vue-router有两种跳转页面的方式，第一种是使用内置的<router-link>组件，它会被渲染为一个a标签

// index.vue

<template>

<div>

<h1>首页</h1>

<router-link to=”/about”>跳转到about</router-link>

</div>

</template>

它的用法和一般组件一样，to是一个prop指向需要跳转的路径，当然也可以使用v-bind动态的设置。

2、<router-link>还有其他的一些prop，常用的有：

tag:

tag可以指定渲染成什么标签，比如<router-link to=”/about”tag=”li”>渲染的结果就是li标签而不是a标签

replace:

使用replace不好留下History记录，所以导航后不能用后退键返回上一个页面，如下：

<router-link to=”/about”replace></router-link>

active:

当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个名为router-link-active的class，设置prop: active-class可以修改默认的名称，在做类似导航栏时，可以使用该功能高亮显示当前页面对应的导航菜单项。

四、路由的高级用法

vue-router还给我们提供了路由导航钩子beforeEach 和 afterEach，它们会在路由即将改变前和改变后触发。

导航钩子有三个参数：

to：即将要进入的目标的路由对象

from： 当前导航即将要离开的路由对象

next：调用该方法后，才能进入下一个钩子

通过这两个钩子，可以做很多提升用户体验的事情，比如一个页面很长，滚动到某个位置，在跳转到另外的页面，滚动条默认是在上一个页面停留的位置，而好的体验肯定是能返回顶部。通过钩子afterEach就可以实现：

// main.js

router.afterEach((to, from, next) => {

window.scrollTo(0, 0)

})

类似的需求还有，从一个页面过渡另一个页面时，可以出现一个全局的Loading动画，等到页面加载完成后，再结束动画。

next() 方法还可以设置参数，比如下面的场景。某些页面需要校验是否登录，如果登录了就可以访问，否则就跳转到登录页。这里通过 localStorage来简易判断是否登录，示例代码如下：

router.beforeEach((to, from, nexxt) => {

if (window.localStorage.getItem(‘token’)) {

next()

} else {

next(‘/login’)

}

})

正确的使用导航钩子可以方便实现一些全局的功能，更多的可能需要在开发的业务逻辑中不断的探索。

以上，就是关于vue-router的主要用法，多练习即可掌握。