×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

一文搞定常考Vue-Router知识点

1.路由的起源

服务端控制的路由来实现服务端渲染，服务端渲染的优缺点在于：

创新互联建站是一家集网站建设,尼元阳企业网站建设,尼元阳品牌网站建设,网站定制,尼元阳网站建设报价,网络营销,网络优化,尼元阳网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

服务端控制路由本质是url和文件读取操作的映射，而前端路由是进行dom元素的显示和隐藏操作，在访问不同路径时显示不同的组件。当前前端路由主要有两种实现方式：hash模式和history模式。

前端路由的优缺点在于：

2.路由的两种模式的区别和原理？

Vue-router有两种路由模式，分别是hash模式和history模式，在路由配置中默认的是hash模式。

hash模式

早期的前端路由是基于location.hash来实现的，对此在react-router和vue-router都是默认将hash路由作为路由模式的。hash模式的url默认带有#，location.hash的值就是url的#后面的内容。

在vue-router中，对于http://blog.onechuan.cn/#/login的hash值就是#/login。

特点：

使用： 切换hash路由的方式有两种

对此，可以看到hash路由的实现就是基于hashchange事件进行监听。

原理：

hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){
 console.log(event.oldURL, event.newURL);
 let hash = location.hash.slice(1);
}

使用onhashchange()的优点：

history模式

history模式的url中没有#，看起来也比hash模式更美观，本质是通过传统的路由分发模式，即用户输入一个url时，服务器会接收请求并解析这个URL，然后做出相应的逻辑处理。

当使用history模式时，URL就像这样：https://blog.onechuan.cn/user/id。

特点：

原理：

history模式主要依赖于：history.pushState()和 history.repalceState() 两个api来实现不进行刷新的情况下，操作浏览器的历史记录。

pushState和repalceState不会触发popstate 事件，这时我们需要手动触发页面渲染。

缺点：在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。

两种路由模式的对比

对比点

hash模式

history模式

原理

onhashchange()

history.pushState()和 history.repalceState()

兼容性

>= ie 8，其它主流浏览器

>= ie 10，其它主流浏览器

实用性

不需要对服务端做改动

需要服务端配置支持

3.如何获取页面的hash变化？

通过监听$route的变化

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
}

通过js的window.location.hash读取#值

window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。

4.Vue-Router如何实现路由懒加载？

使用箭头函数+import动态加载

const List = () => import('@/components/list.vue')
const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
});

使用箭头函数+require动态加载

const router = new Router({
  routes: [
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   }
  ]
});

使用webpack的require.ensure技术

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

// r就是resolve
const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
const router = new Router({
  routes: [
  {
    path: '/list',
    component: List,
    name: 'list'
  }
 ]
}));

5.$route 和$router 的区别？

$route 是“路由信息对象”，包括 path、params hash、query、fullPath、matched、name 等路由信息参数；

$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。

6.如何定义动态路由？如何获取传过来的动态参数？

param方式

配置路由格式：/router/:id

定义动态路由

//在APP.vue中
用户    

//在router.js
{
   path: '/user/:userid',
   component: User,
}

路由跳转

// 方法1：
按钮

// 方法2：
this.$router.push({name:'users',params:{uname:onechuan}})

// 方法3：
this.$router.push(`/user/${onechuan}`);

参数获取通过 $route.params.userid 获取传递的值。

query方式

路由定义

//方式1：直接在router-link 标签上以对象的形式
档案

// 方式2：写成按钮以点击事件形式
    
profileClick(){
  this.$router.push({
    path: "/profile",
    query: {
        name: "kobi",
        age: "28",
        height: 198
    }
  });
}

跳转方法

// 方法1：
按钮

// 方法2：
this.$router.push({ name: 'users', query:{ uname:james }})

// 方法3：
按钮

// 方法4：
this.$router.push({ path: '/user', query:{ uname:james }})

// 方法5：
this.$router.push('/user?uname=' + james)

获取参数通过$route.query 获取传递的值。

7.params和query的区别？

对比点

params

query

引入方式

用name来引入

用path来引入

接收参数

this.$route.params.name

this.$route.query.name

url地址显示

params则类似于post，url不显示参数

query更加类似于ajax中get传参，url显示参数

刷新页面

params刷新会丢失 params里面的数据

query刷新不会丢失query里面的数据

8.Vue-router 路由钩子在生命周期的体现？

完整的路由导航解析流程（不包括其他生命周期）

触发钩子的完整顺序

路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件∶

导航行为被触发到导航完成的整个过程

9.Vue-router 导航守卫有哪些？

Vue-Router导航守卫

在一些场景，比如：最常见的登录权限验证，当用户满足条件时，才让其进入导航；否则就取消跳转，并跳到登录页面让其登录。

为此有很多种方法可以植入路由的导航过程：

全局路由钩子

vue-router全局有三个路由钩子;

具体使用∶

router.beforeEach((to, from, next) => {  
    let ifInfo = Vue.prototype.$common.getSession('userData');  // 判断是否登录的存储信息
    if (!ifInfo) { 
        // sessionStorage里没有储存user信息    
        if (to.path == '/') { 
            //如果是登录页面路径，就直接next()      
            next();    
        } else { 
            //不然就跳转到登录      
            Message.warning("请重新登录！");     
            window.location.href = Vue.prototype.$loginUrl;    
        }  
    } else {    
        return next();  
    }
});
router.afterEach((to, from) => {  
    // 跳转之后滚动条回到顶部  
    window.scrollTo(0,0);
});

单个路由独享钩子

beforeEnter 如果不想全局配置守卫的话，可以为某些路由单独配置守卫，有三个参数∶ to、from、next

export default [    
    {        
        path: '/',        
        name: 'login',        
        component: login,        
        beforeEnter: (to, from, next) => {          
            console.log('即将进入登录页面')          
            next()        
        }    
    }
]

组件内钩子

beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave这三个钩子都有三个参数∶to、from、next

注意点，beforeRouteEnter组件内还访问不到this，因为该守卫执行前组件实例还没有被创建，需要传一个回调给 next来访问，例如：

beforeRouteEnter(to, from, next) {      
    next(target => {        
        if (from.path == '/classProcess') {          
            target.isFromProcess = true        
        }      
    })    
}

10.Vue-router跳转和location.href有什么区别？

参考文章

https://juejin.cn/post/6964779204462247950

https://mp.weixin.qq.com/s/7TLVBK2A73-1f7yOPMWMHg


文章标题：一文搞定常考Vue-Router知识点
链接分享：http://cdbrznjsb.com/article/cddpejg.html

其他资讯

让你的专属顾问为你服务