一、什么是路由？
网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。
web中，路由的概念也是类似，根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)。
使用vue.js构建项目，vue.js本身就可以通过组合组件来组成应用程序；当引入vue-router后，我们需要处理的是将组件(components)映射到路由(routes)，然后在需要的地方进行使用渲染。
1.概念：路由其实就是指向的意思，当我们点击home按钮时，页面中就要显示home的内容，点击login按钮时，页面就显示login的内容，也可以说是一种映射，所有在页面上有两个部分，一个是点击部分，一个是显示部分。
2.路由中有三个基本的概念，route,routes,router。
<1>route:它是一个路由，是一个单数，点击Home按钮->Home内容
<2>routes:它是一组路由，把每一条路由组合起来，串接起来形成一个数组；[{home按钮=>home内容}，{about按钮=>about内容}]
<3>router:它是一个机制，相当于一个管理者，来管理所有路由；
<4>客户端中的路由原理:实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.
二、基本使用
<1>下载：
npm install vue-router --save
<2>引用：在router下面的index.js中
//index.js
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
//创建路由对象
export default new VueRouter({
})
<3>路由跳转方式:
router-link
to
帮助我们生成a标签的href
锚点值代码维护不方便，如果需要改变锚点值名称
则需要改变 [使用次数 + 1（配置规则）] 个地方的代码
3.1静态路由跳转
<router-link to="/">首页</router-link>
3.2动态路由跳转
<router-link :to='{path:"/"}'>首页</router-link>
3.3编程式导航
this.$router.push({path:"/"})
<4>命名路由
1:给路由对象一个名称 { name:'home',path:'/home',component:Home}
2:在router-link的to属性中描述这个规则
<router-link :to="{name:'home'}>首页</router-link>"
通过名称找路由对象，获取其path，生成自己的href
极大的降低维护成本，锚点值改变只用在main.js中改变path属性即可
<5>嵌套路由
import Vue from "vue"
import VueRouter from "vue-router"
import Tran from "../components/transition.vue"
import TranOne from "../components/transitionone.vue"
import About from "../components/about.vue"
import First from "../components/aboutfirst.vue"
import Two from "../components/abouttwo.vue"
Vue.use(VueRouter)
export default new VueRouter({
mode:"history",
routes:[
{
path:"/",
component:Tran,
name:"index",
},{
path:"/one",
name:"one",
component:TranOne
},{
path:"/about",
name:"about",
component:About,
children:[
{
path:"/about/first",
component:First
},{
path:"/about/two",
component:Two
}
]
}
}
]
})
<6>路由重定向和别名
//redirect alias
export default new VueRouter({
mode:"history",
routes:[
{
path:"/",
component:Tran,
name:"index",
redirect:"/about",
alias:"/index"
},{
path:"/about",
component:About
}
})
<7>路由跳转模式
// hash histroy(html5)
<8>路由导航首位
分类:
全局导航守卫:
全局前置导航守卫
router.beforeEach((to,from,next)=>{
//to 去向的目标对象
//form 来自的对象
//next 继续执行后续代码.必须执行next
})
全局后置导航守卫
router.afterEach((to,from)=>{
})
路由独享守卫
export default new VueRouter({
mode:"history",
routes:[
{
path:"/",
component:Tran,
name:"index"
},{
path:"/about",
component:About,
//路由独享守卫
beforeEnter:()=>{
}
}
组件内的导航守卫
<script>
export default {
name:"",
data(){
return {
}
},
beforeRouteEnter(to,from,next){
//进入组件时调用
},
beforeRouteUpdate(to,from,next){
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteleave(to,from,next){
//离开组件时调用
}
}
</script>
后续会继续完善剩下内容,如果感觉有用,请留下宝贵的一个赞!!!!
