一、前言
我们可能一开始接触前端的时候，路由都是由后台来完成的，即通过用户请求的url导航到具体的html页面。那么前端路由是什么呢？
二、前端路由
前端路由是通过配置JS文件，将这个工作拿到前端来完成。简单地说，路由就是根据不同的url地址展示不同的内容和页面。
1.使用场景
前端路由更多地是使用在单页面应用(SPA)上，因为单页面应用基本上是前后端分离的，后端自然不会给前端提供路由。首先来分析下，前端路由的优缺点
优点
- 从性能和用户体验的层面来看，后端路由每次访问一个新页面都要像服务器发送请求，然后服务器再响应请求，这个过程是有延迟的。而前端路由在访问一个新页面的时候仅仅是变换了一个路径，没有网络延迟，对于用户体验会有相当的提升。
- 在某些场合，使用
ajax可以让页面无刷新,页面变了，但是URL没变，用户就不能复制url
缺点
- 在某些场合，使用
- 使用浏览器的前进、后退按钮会重新发送请求，没有合理利用缓存。
三、Vue Router
Vue.js官方提供了一套专用的路由工具库Vue Router，其使用和配置都非常简单。
1. 安装和使用
- 安装使用命令
cnpm install vue-router --save
- 安装使用命令
- 在
mian.js中全局性配置这个插件使用Vue.use(VueRouter);
- 在
- 如果使用
vue-cli脚手架搭建的项目,我们看到在src的router文件下，有一个router.js,这里已经帮你配置好了前端路由，代码如下
- 如果使用
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
2.建立路由模块
在router文件下的index.js中配置路由，使用new Router来建立路由，一条路由实现需要三部分:path,name,component,代码如下，
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/pages/login'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'./login',
name : 'Login',
component:Login
}
]
})
可以看到相比于上面的例子，我们新加了一个login的页面，并且给它配置了路由。
3.启动路由
在main.js中配置如下代码，
import Vue from 'vue'
import App from './App'
import router from './router'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
这样路由匹配到的组件会渲染到App.vue的<router-view/>中，在App.vue的代码如下
<template>
<div id="app">
<router-view/>
</div>
</template>
最后App.vue会渲染到index.html中，index.html的代码如下，
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
这样就会把渲染出来的页面挂在到id为app的div里面了
3.路由重定向
项目中通常会有一个首页，我们可以通过路由重定向来确定首页，示例如下，
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
redirect: './login'
},
{
path:'/login',
name :'Login',
component:Login
}
]
使用redirect将路由重定向到Login页面，这样打开浏览器就会自动跳转，如图,
4.<router-link>使用
<router-link>组件支持用户在具有路由功能的应用中单击导航通过to属性跳转到指定的目标地址，默认渲染成带有正确链接的<a>标签,当然通过配置tag也可以生成别的标签。
- 普通跳转，代码如下
<p>
<router-link :to="'Login'">go to login</router-link>
</p>
// css代码
a {
color: red;
}
因为默认渲染成a标签，所以在给a设置样式为红色就会生效，如图，
当然你也可以通过
tag来变成其他标签，但是在样式中一定要对应。
- 带参数跳转
<router-link :to="{path:'Login',query:{name:'xwl'}}" tag="b">go to login</router-link>
这样发现浏览器的地址如图，
5.路由对象属性
路由的对象属性主要有，$route.path,$route.params,$route.query,$route.hash,$route.fullPath,我们可以通过一个例子来明白他们的含义。
无键值对
// 跳转前
<router-link :to="{path:'Login',query:{name:'xwl'},params:{sex:'man'}}" tag="b">go to login</router-link>
// 跳转后
<div>
<p>当前路由路径：{{this.$route.path}}</p>
<p>键值对：{{this.$route.params}}</p>
<p>查询参数：{{this.$route.query}}</p>
<p>hash值：{{this.$route.hash}}</p>
<p>完整路径：{{this.$route.fullPath}}</p>
</div>
代码运行结果如下，
有键值对
// 跳转前
<router-link :to="{name:'Login',params:{sex:'man'}}" tag="b">go to login</router-link>
// 跳转后
<div>
<p>当前路由路径：{{this.$route.path}}</p>
<p>键值对：{{this.$route.params}}</p>
<p>查询参数：{{this.$route.query}}</p>
<p>hash值：{{this.$route.hash}}</p>
<p>完整路径：{{this.$route.fullPath}}</p>
</div>
运行结果
6.router.push使用
其实在使用</router-link>方法的时候，内部会调用router.push,所以两者的效果是一样的，具体使用如下，
<template>
<div class="hello">
<Button type="info" @click="go">go to login</Button>
</div>
</template>
// js代码
<script>
export default {
name: 'HelloWorld',
methods:{
go(){
this.$router.push({
name :'Login',
params:{
name:'xwl'
}
});
}
}
}
</script>
点击按钮就会跳转到login页面，并且谁携带参数，如图
当然其他还有
router.replace,router.go方法可以自行查文档
四、总结
我是完全从小白的角度来开始学习和探索的，所以请大神绕过！
