Vue路由基本介绍

1.路由的基本概念与原理

1.1路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

路由分为：前端路由
          后端路由

1.后端路由

概念：根据不同用户的URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系

（2）.SPA

1.后端渲染(存在性能问题)
2.Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作)
3.SPA(Single Page APPlication)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
4.SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash变化不会触发新的URL请求)
5.在实现SPA过程中，最核心的技术点就是前段路由

2.前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

用户————→ 前端路由————→事件处理函数 █ █ ▆
  ↑                       |
  |———————————————————————↓
    事件函数渲染响应内容   

2.Vue Router

Vue Router包含的功能有：
支持HTML5历史模式(history)或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

2.1基本使用步骤(含脚手架使用方法)

脚手架外使用方法：
1.引入相关库文件（vue.js、Vue-Router等相关插件）
<script src="vue_xx.x.xx-js"></script>
<script src="vue-router_xx.x.xx-js"></script>

2.添加路由链接
<!-- router-link是vue中提供的标签，默认会被渲染成a标签 >
<!-- to属性默认会被渲染成herf属性 -->
<!-- to属性的值默认会被渲染成为#开头的hash地址 -->
<router-link to="news">news</router-link>
<router-link to="city">city</router-link>

3.添加路由填充位置
<!-- 路由填充位(也叫路由占位符) -->
<!-- 将来规则而匹配到路由组件，将会被渲染到router-view所在的位置 -->
<router-view></router-view>

4.定义路由组件
const user = {
    template:'<div>user</div>'
}
const news = {
    template:'<div></div>'
}

5.配置路由规则并创建路由实例
//创建路由实例
let router = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则要展示的组件
        { path:'/user',component:User }
        { path:'/news',component:News }
    ]
})

6.把路由挂载到Vue根实例中
new Vue({
    el:'#app',
    //为了能够让路由规则生效，必须把路由对象挂载到vue对象的实例上
    router
})

脚手架使用Vue Router
1.下载安装
yarn add vue-router | cnpm i vue-router -S

2.引入vue-router
import router from 'vue-router'

3.注册
Vue.use(router)

4.配置路由表
const router = ({
    mode:路由的模式
    //路由表
    routes:[
        { path:'/news',component:News }
        { path:'/index',component:Index }
    ]
})

5.把router实例注入到vue根实例，就可以使用路由
const app = new Vue({
    router
}).$mount('#app')

6.在components或者views中创建好路由组件

7.添加路由链接
<!-- router-link是vue中提供的标签，默认会被渲染成a标签 >
<!-- to属性默认会被渲染成herf属性 -->
<!-- to属性的值默认会被渲染成为#开头的hash地址 -->
<router-link to="news">news</router-link>
<router-link to="city">city</router-link>

8.添加路由填充位置
<!-- 路由填充位(也叫路由占位符) -->
<!-- 将来规则而匹配到路由组件，将会被渲染到router-view所在的位置 -->
<router-view></router-view>

2.2路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。

通过路由规则的redirect属性，指向一个新的路由地址，可以方便地设置路由的重定向

const router = new VueRouter({
    routes:[
        //其中path表示的是需要被重定向的原地址，redirect表示将要被重定向的新地址
        { path:'/',redirect:'/user' }
        { path:'/news',component:User }
        { path:'/city',component:City }
    ]
})

3.vue-router嵌套路由

3.1嵌套路由用法

1.父路由组件模板

父路由链接
父路由填充位
<div>
    <router-link to='/user'>User</router-link>
    <router-link to='/news'>News</router-link>
</div>
<div>
    <!-- 控制组件显示位置 -->
    <router-view></router-view>
</div>

2.子级路由组件模板

子级路由链接
子级路由填充位
  <div>
    <h1>User组件</h1>
    <router-link to='/user/tab1'>tab1</router-link>
    <router-link to='/user/tab2'>tab2</router-link>
</div>
<div>
    <!-- 子级路由填充位 -->
    <router-view></router-view>
</div>

3.嵌套路由配置

父级路由通过children属性配置子级路由
const router = new VueRouter({
    routes:[
        { path:'/user',component:User },
        { 
            path:'/news',
            component:News,
            children:[
                { path:'/news/tab1',component:Tab1 },
                { path:'/news/tab2',component:Tab2 },
            ]
        }
    ]
})    

4.vue-router动态路由匹配

4.1动态匹配路由的基本用法

应用场景：通过动态路由参数的模式进行路由匹配

const router = new VueRouter({
    routes:[
        //动态路径参数以冒号开头
        { path:'/news/:id',component:News }
    ]
})

const User = {
    //路由组件中通过$router.params获取路由参数
    template:`<div>User{{ $router.params.id }}</div>`
}

脚手架cil
<template>
    <div>动态路由参数为{{ Userid }}</div>
</template>
data(){
    return{
        Userid:''
    }
}
created(){
    this.$watch('$route',()=>{
        let { id } = this.$router.params
        this.Userid = id
    },{
        immediate:true
    })
}

$router与对应路由形成高度契合，不够灵活，所以可以使用props将组件和路由解耦

1.props值为布尔类型

const router = new VueRouter({
    routes:{
        //如果props被设置为true，router.params将会被设置为组件属性
        { path:'/user/:id',component:User,props:true }
    }
})

组件内
const User = {
    props:['id'],   //使用props接收路由参数
    template:`<div>用户id为{{ id }}</div>` //使用路由参数
}

2.props值为对象类型

const router = new VueRouter({
    routes:[
        //如果props是一个对象，它会被按原样设置为组件属性
        { path:'/user/:id',cpmponent:User,props:{
            usname:'张三',age:'12'
        }}
    ]
})
组件内
const User = {
    props:['usname','age']
    template:`<div>用户信息---{{ usname+'-----'+age }}</div>`
}

3.props值为函数类型

const router = new VueRouter({
    routes:[
        { path:'/user/:id',component:User,props:route=>({
            usname:'李四',
            age:20,
            id:route.params.id
        })}
    ]
})
组件内
const User = {
    props:['usname','age','id'],
    template:`<div>用户信息{{ usname+'--'+age+'--'+id }}</div>`
}

5.vue-router命名路由

5.1命名路由的配置规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”
const router = new VueRouter({
    routes:[
        { path:'/user',name:'User',component:User }
    ]
})

<router-link :to="{ name:'User',params:{ id:123 } }">User</router-link>
router.push({name:'User',params:{ id:123 }})

6.vue-router编程式导航

6.1页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航
例如：普通网页中的<a></a>链接或vue中的<router-link></router-link>

编程式导航:通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
例如：普通网页中的location.href

常用的编程式导航API如下
this.$router.push("路由地址")
this.$router.go(n) //前进或者后退
实例:
const User = {
    template:'<div><button @click="User">跳转到用户页面</button></div>'
    methods:{
        User(){
            //用编程的方式控制路由跳转
            this.$router.push('/user')
        }
    }
}

6.2编程式导航参数规则

router.push()方法参数规则
//字符串(路径名称)
router.push('/user')
//对象
router.push({path:'/user'})
//命名的路由传递参数
router.push({ name:'User',params:{ id:123 } })
//带查询参数,变成/user?uname='李四'
router.push({ path:'/user',query:{ uname:'李四' } })

7.导航守卫

概念:“导航”表示路由正在发生变化

导航守卫表示当导航开始变化到导航变化结束的那段时间里，根据导航的变化做出一些响应。比如要跳转到一个页面时，看他是不是登录了，没登录的话，得先让他登录。

主要是通过跳转到某处或者取消跳转来守卫导航

导航守卫包括全局导航守卫和单个路由独享的还有组件内的守卫

1.全局前置守卫(路由跳转前触发)
router .beforeEach((to,from,next)=>{
    //.....
})

2.全局解析守卫: beforeResolve
这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，和beforeEach区别官方解释为：
区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

3.全局后置钩子(路由跳转之后触发)
router.afterEach((to,from)=>{
    //注：这里不需要next因为已经跳转过去了不需要改变跳转的操作
})

4.路由独享的守卫
(可以在路由配置上直接定义beforeEnter守卫)
const router = new VueRouter({
    routes:[
        { path:'/news',
        name:'News',
        component:News,
        beforeEnter:(to,from,next   )=>{

        } }
    ]
})

5.组件内的守卫(组件内直接定义的导航守卫)
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
 }
}

参数：
to:目标路由对象
from:即将要离开的路由对象
next:
【1】.涉及到有next参数的钩子，必须调用next()才能执行下一个钩子函数，否则路由跳转会停止
【2】.当然next可以这样使用，next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。意思是当前的导航被中断，然后进行一个新的导航。可传递的参数与router.push中选项一致
【3】.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子
【4】.如果要中断当前的导航要调用next(false)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到from路由对应的地址。（主要用于登录验证不通过的处理）

8.路由元信息

路由元信息用于存储路由信息，可以存储任何信息并任意命名，用于标识等各种用途

{
    path:'/user',
    name:'User',
    component:User,
    meta:{
        //meta字段信息一般用于导航守卫钩子函数的判断逻辑
    }   
}

9.过渡动效

router-view基本动态组件，所以我们可以使用transition组件来给他添加一些过渡动效

10.滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动

注意: 这个功能只在支持 history.pushState 的浏览器中可用
const router = new VueRouter({
    routes:[...],
    scrollBehavior(to,from,savedPosition){
        return //期望要滚动到哪个位置上
               //{x:0,y:0},如果返回一个false或者空对象那么不作任何滚动
    }
})

11.路由懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载

在单页面应用中，如果没有引用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时