路由 vue-router 路由守卫路由重定向路由嵌套路由守卫路由命名路由懒加载-蒲公英云

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

1.基本使用

(1)安装

①初始化项目时选择安装vue-router

②手动安装

npm i vue-router --save

(2)基本使用

第一步：创建几个页面组件

第二步：在/src/main.js中引入vue-router插件，并引入页面组件、定义路由规则

import VueRouter from 'vue-router'
Vue.use(VueRouter)//在vue中使用插件【重要】
//引入页面组件
import Home from './components/Home'
import Movie from './components/Movie'
import Music from './components/Music'
var router = new VueRouter({
    //路由规则地址与页面组件的配置映射关系表
    routes:[
        { path:'/home',component:Home },
        { path:'/movie',component:Movie },
        { path:'/music',component:Music },
    ]
})

path属性表示浏览器地址关键词，要以斜杠开头

component属性表示路由地址关键词对应的页面组件

第三步：在/src/App.vue中添加路由出口组件

<div id="app">
    <!-- 
        路由出口 
        根据当前浏览器中的地址与路由规则映射表进行匹配，匹配到之后，就把对应的组件模板内容展示在路由出口的位置上。
    -->
    <router-view></router-view>
</div>

2.路由导航

(1)内置组件

router-link 会在页面上生成一个超链接。

属性：

①to

需要设置一个to属性，它的值是设置路由映射规则时的path属性值。

to属性的值，必须以斜杠开头，不然会出现地址异常的现象。

②active-class

active-class 非必填项，模糊匹配的类名，可以用来设置激活的导航类名

写在router-view上方或者下方的router-link会一直在页面中显示。

③exact-active-class

精确匹配的类名，只有访问的路由规则地址和to属性中一模一样时才会设置上对应的类名

(2)编程式导航

vue-router类的实例中给提供了一些方法，可以实现页面跳转

push 此方法会把当前访问的页面作历史记录，然后跳转到指定的路由规则上

replace 此方法会用即将跳转的路由规则地址替换当前访问的页面路由规则地址

go 此方法可以进行页面路由地址的回退，一般写-1，表示回退到上一个访问的页面

<button @click="$router.push('/movie')">前往电影页面</button>
<button @click="toMusic">前往音乐页面</button>
<script>
export default {
    methods:{
        toMusic(){
            this.$router.replace('/music')
        }
    }
}
</script>
<button @click="$router.go(-1)">返回</button>

3.路由重定向

如果需要展示默认的一个页面或者当用户输入不存在的路由规则时，扔让用户看到一个默认的页面时，可以使用路由重定向（路由地址跳转）。

routes:[
    ....,
    { path:'*',redirect:'/home' }
]

*表示所有的路由规则都没有匹配到

redirect表示要重定向到的路由规则path属性值

4.路由嵌套

第一步：再创建几个页面组件

第二步：在一级路由规则中添加一个children属性，它的值和routes数据类型相同，都是一个数组。

routes:[
    { path:'/home',component:Home },
    { 
        path:'/movie',
        component:Movie,
        children:[
            { path : 'guonei' , component:Guonei},
            { path : 'guowai' , component:Guowai}
        ]
    },
    { path:'/music',component:Music },
    { path:'*',redirect:'/home' }
    // {path:'*',component:Home}
]

子级路由规则的path属性不需要添加斜杠

第三步：在子级路由的父级路由规则对应的页面组件中添加router-view组件，用来展示子级路由规则对应的页面组件内容。

<template>
    <div class="movie">
        <h1>movie页面</h1>
        <router-link to="/movie/guonei">国内</router-link>
        <router-link to="/movie/guowai">国外</router-link>
        <router-view class="content"></router-view>
    </div>
</template>

5.路由传参

(1)动态路由

动态路由规则定义：

{ path:'/关键词/:参数名' }

冒号后面是一个参数名，能够在进行路由规则匹配时，能够匹配到任意的字符或者数字。

第一步：创建一个详情页面

第二步：在路由配置文件中定义一个动态的路由规则

{
    path:'/movieinfo/:mid',component:MovieInfo
}

第三步：在电影列表页面通过编程式导航进行页面跳转

methods:{
     toInfo(id){
         this.$router.push('/movieinfo/'+id)
     }
 }

第四步：在电影详情页面获取路由地址中的参数

<p>编号：{
   { $route.params.mid }}</p>

(2)query查询参数

如果路由地址中的参数数量不固定时，使用动态路由就不合适了。

第一步：定义一个固定的路由规则

{
    // path:'/movieinfo/:mid',component:MovieInfo
    path:'/movieinfo',component:MovieInfo
}

第二步：在电影列表页面通过编程式导航进行页面跳转

methods:{
    // toInfo(id){//动态路由
    //     // this.$router.push('/movieinfo/'+id)
    // }
    toInfo(obj){//查询参数
        // this.$router.push('/movieinfo/'+id)
        this.$router.push({
            path:'/movieinfo',
            query:{
                movieid:obj.id,
                title:obj.title
            }
        })
    }
}

第三步：在电影详情页面获取路由地址中的参数

mounted(){
    console.log(this)
    // this.info = this.movies.find(item=>{
    //     return item.id == this.$route.params.mid
    // })
    this.info = this.movies.find(item=>{
        return item.id == this.$route.query.movieid
    })
}

1.路由模式

/src/router/index.js，和routes平级的一个属性

默认模式是hash，在浏览器地址中会有一个#，#号后面的内容会被解析成路由规则，并进行匹配，如果匹配到指定的路由规则，则展示其对应的组件内容（页面不会刷新，只是局部内容发生了变化）。

history模式，最直观的是在浏览器地址中没有了#，它更多的使用html5中的history.pushState API来完成 URL 跳转而无须重新加载页面。项目打包后部署到服务器上需要配合后端（Nginx、Apache、Tomcat）进行重写规则的设置（不然会出现404）。

2.路由命名

每一个路由规则都可以设置一个name属性，在进行路由跳转并传递参数时，使用命名的路由会比较方便。

路由规则添加name属性：

{ 
    name:'xiangqing',
    path:'student/:id',
    component:StudentInfo 
}

在跳转页面时，使用name属性进行路由跳转及参数的传递

methods:{
    toInfo(id){
        // this.$router.push('/index/student/'+id)
        this.$router.push({
            name:'xiangqing',//通过路由name进行跳转
            params:{id:id}
        })
    }
}

3.路由别名

通过alias属性，可以给每一个路由规则设置一个别名，别名和path属性的路由都可以访问。

{ 
    path:'/login',
    component:Login,
    alias:'/denglu'
}

4.路由懒加载

import Index from '@/components/pages/Index'
import Login from '../components/pages/Login'
import Student from '../components/pages/Student'
import StudentInfo from '../components/pages/StudentInfo'
import Setting from '../components/pages/Setting'

这种方式会在vue加载vue-router配置文件时把对应的页面组件都加载一次，会造成资源消耗比较大。可以在路由规则中引入组件，实现匹配到指定的路由规则时才会加载对应的页面组件

{
    path:'/index',
    component:()=>import('../components/pages/Index')
}

5.路由守卫

路由守卫可以在路由规则执行之前或者之后执行一定的操作，从而实现对用户身份的验证。

(1)路由独享守卫

在定义路由规则时，可以给某一个路由规则设置守卫。

beforeEnter钩子函数会在某一个路由规则匹配到时，自动的触发，从而实现一定的验证效果

{ 
    path:'/关键词',
    component:()=>import('页面组件'),
    beforeEnter:(to,from,next)=>{
        ...
    }
}

在beforeEnter钩子函数中可以接收3个参数

①to 目标路由规则

②from 来源路由规则

③next 函数，用来执行默认的路由规则或者指定的路由规则

next();//执行默认路由规则
next(false)//终止路由规则的执行
 next('/index')//执行指定的路由规则

(2)组件守卫

①beforeRouteEnter

当路由规则匹配的组件被访问前，会自动的触发此钩子函数

示例代码：

在首页组件中来验证用户有没有登录，如果没有登录则只能访问到登录页面

<script>
export default {
    beforeRouteEnter(to,from,next){
        //如果本地存储中没有用户信息，则认为用户没有登录
        //用户没有登录的情况下，只能访问到登录页面
        var userinfo = localStorage.getItem('users');
        if(!userinfo){
            next('/login')
        }else{
            next();
        }
    }
};
</script>

②beforeRouteUpdate

在动态路由规则地址参数发生变化时，会自动的触发此钩子函数

示例代码：

beforeRouteUpdate(to, from, next) {
     console.log(to);
     console.log(from);
     console.log(next);
}

注意：路由模式是history时，不会触发此钩子函数

③beforeRouteLeave

当要离开某一个路由规则之前，会触发此钩子函数

示例代码：

<script>
    export default {
         beforeRouteLeave(to, from, next) {
            if( window.confirm("确定要从此页面离开吗？")){
                next();
            }else{
                next(false)
            }
        }   
    }
</script>

(3)全局守卫

全局守卫会应用到项目中所有的路由规则

/src/router/index.js

①全局前置守卫

router.beforeEach((to,from,next)=>{…})

项目中所有的路由规则访问前会自动的触发此钩子函数

②全局后置守卫

router.afterEach((to,from)=>{…})

项目中所有的路由规则访问后会自动的触发此钩子函数

示例代码：

var router = new Router({ ...})
//全局前置守卫
router.beforeEach((to,from,next)=>{ 
    console.log('前置守卫...')
    //如果用户访问的不是登录页面，才去验证用户有没有登录
    //如果本地存储中没有用户信息，则认为用户没有登录
    //用户没有登录的情况下，只能访问到登录页面
    if(to.fullPath!='/login'){ 
        var userinfo = localStorage.getItem('users');
        if(!userinfo){ 
            next('/login')
        }else{ 
            next();
        }
    }else{ 
        next();
    }
})
//全局后置守卫
router.afterEach((to,from)=>{ 
    console.log('后置守卫...')
    console.log(to)
    console.log(from)
})
export default router;