Vue-Router全方位解读

Vue Router是什么?

官网传送门

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

 

一、集成Vue Router

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

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

npm i vue-router --save

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

二、如何使用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 'vue-router'
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}}

三、导航守卫

 

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 路由离开之前

 

四、路由懒加载

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

 

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等

希望我的分享对你能有帮助,如何对你有所启发,以程序员最高礼遇点赞????评论加转发的方式来鼓励我,你的肯定是我前进的最大动力!或者添加QQ群一起甲流技术:608229520