当前位置：前端路由与vue-router
2018/07/18 17:54 分类： 技术交流 浏览：83
一、什么是前端路由？
前端路由，即由前端来维护一个路由规则，实现由两种，一种是利用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的主要用法，多练习即可掌握。
感谢源码时代教学讲师提供此文章！
本文为原创文章，转载请注明出处！
赞 0
