vue之路由(八)

一、什么是路由？

网络原理中，路由指的是根据上一接口的数据包中的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>

后续会继续完善剩下内容,如果感觉有用,请留下宝贵的一个赞!!!!