Vue从甜小白到皮大佬系列(七) Vue Router

阅读时间预估:6分钟

啥是Vue Router?

官方传送门

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌,在咱们项目中也是必会技能之一。下面我想经过如下几个方面来分享。

1、集成Vue Router

• 1.若是安装了vue脚手架cli3 在create项目的时候会有安装Vue router的选项,选中敲空格就会默认安装Vue router

• 2.若是在create项目的时候没有自动安装,那么要手动进行安装.

npm i vue-router --save
复制代码

• 3.安装好vue-router后最好在src文件下建立一个router.js来专门管理整个项目的路由结构

2、使用Vue Router

1.简单构建一个经过浏览器输入访问地址的路由

• 1.src目录下建立一个router.js文件而后在文件中构建路由数组并导出,必定要注意构建路由数组是routes而不是routers哦!!

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    // 构建路由数组
    routes: [{
       
    }]
})
复制代码

• 2.在main.js文件中全局引用router.js并挂载到项目中

// 引入router.js
import router from 'router.js'
Vue.config.productionTip = false
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')
复制代码

目标:经过路由localhost:8080/#/home跳转到Home组件界面

• 3.构建一个Home.vue的组件, 在router.js中构建routes的配置

import Vue from 'vue'
import Router from 'vue-router'

// 引入views
import Home from './views/Home.vue'
Vue.use(Router);
export default new Router({
    routes: [{
        path: '/home',
        name: 'home',
        component: Home
    }]
})
复制代码

• 4.给Home组件配置出口<router-view></router-view>,这一步很是关键!!没有出口,是不会显示出来的.

在App.vue中

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
复制代码

至此一个简单的路由配置就完美的配置完了,浏览器输入localhost:8080/#/home就能够访问啦!若是有多个组件须要配置路由,均可以在router.js中配置.

引入图片

2.router-link

说明:router-link其实就是封装的a标签

<router-link to="/home">Home</router-link>
复制代码

3.vue-router配置子路由

说明:访问二级或三级页面的时候须要配置子路由.

App.vue

<template>
  <div id="app">
    <p>导航 ：
      <router-link to="/">首页</router-link> |
      <router-link to="/home">Home页面</router-link> |
      <router-link to="/home/about">-About界面</router-link> |
      <router-link to="/home/me">-Me页面</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>
复制代码

router.js中配置home的children路由

{path: '/home',
component: Home,
children: [
           {path: 'about',component: About},
           {path: 'me',component: Me}]
}
复制代码

注意点:在Home.vue中必定要添加出口<router-view></router-view>不然不会生效

vue-router如何参数传递

1.用$route的params来动态传参

• 经过$route.name的形式来接受参数name这个参数
• 定义路由path键值对的形式传参

routes: [{
        path: '/home/:name/:age/:height',
        name: 'home',
        component: Home
    }]
复制代码

在浏览器中输入localhost:8080/#/home/name=james/age=26/height=180

• 在App.vue中经过this.$route.params来动态取值

2.$route的query来动态传参

$route.params仅能取到相似localhost:8080/#/home/name=james/age=26/height=180的地址传过来的参数,若是是localhost:8080/#/home/name=james/age=26/height=180?sex=男 带 ?,只能经过$route.query的方式来取值

性别{{this.$route.query.sex}}
复制代码

上面两种方式是为了区分路由动态传递的参数的性质来分区取值,咱们还能够直接封装方法,取值的时候不用这么麻烦,能够经过props传值 在router.js中

let fun = ({parms,query}=>{
return {
    age:param.age,
    sex:param.sex,
    height:query.height,
}
})
// 经过props传值
{path:'/home/:sex?height',name:'mine',component:Mine,props:fun}
复制代码

// 定义接受的参数
props:['name','sex','height']
复制代码

//直接取值
{{name}}
{{sex}}
{{height}}
复制代码

3、导航守卫

1.什么是路由守卫?

经过路由守卫能够刷新或进入的路由界面进行权限验证,至关于Vue全局的中间件

2.全局守卫

任何一个路由进入均可以先拦截,而后根据添加跳转不一样的路由。

关键Code: router.js中

const router = new VueRouter({.....})
router.beforeEach((to,from,next)=>{
    if (to.path !== 'login') { //验证是否登陆
        if(window.isLogin) {
            next();
        } else {  //没有登陆
            next('/login?redirect='+to.path);
        }
    } else { //不须要验证
        next();
    }
    next();
})
复制代码

3.局部守卫

只控制某单个组件的路由在routes数组里作控制,和全局同样须要beforeEach

4.生命周期

• beforeRouteEnter 进入以前调用
• beforeRouteUpdate 路由参数变了
• beforeRouterLeave 路由离开以前

4、路由懒加载

用的时候在加载,提升性能

1.懒加载的使用方法:

改变组件的引入方式:

由以前的

import About from './views/About'
复制代码

转变为

const About = ()=> import('./views/About')
复制代码

这样就轻松的实现了路由的懒加载啦!

相关API

• this.$router.push(path): 至关于点击路由连接(能够返回到当前路由界面)

• this.$router.replace(path): 用新路由替换当前路由(不能够返回到当前路由界面)

• this.$router.back(): 请求(返回)上一个记录路由

• this.$router.go(-1): 请求(返回)上一个记录路由

• this.$router.go(1): 请求下一个记录路由

$router 和 $route的区别

• $router

router是VueRouter的一个对象，经过Vue.use(VueRouter)和VueRouter构造函数获得一个router的实例对象,这个对象中是一个全局的对象，他包含了全部的路由包含了许多关键的对象和属性

• $route

route是一个跳转的路由对象，每个路由都会有一个route对象，是一个局部的对象能够获取对应的name,path,params,query等

但愿个人分享对你能有帮助,如何对你有所启发,以程序员最高礼遇点赞💓评论加转发的方式来鼓励我,你的确定是我前进的最大动力!

扫一扫下面的二维码,回复学习便可免费领取最新前端学习资料,也但愿在前端进阶的路上,咱们一块儿成长,一块儿进步!