目录

引言:该篇主要讲的是关于vue-router的原理以及使用等问题,以及面试中常被问到的几个点,有部分还未整理后续会继续更新;

1.vue-router 是什么?

Vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用

在之前常用的是用a标签进行跳转,现在做的是单页面应用,所以必须使用v-router进行管理

2.如何使用v-router?

1. 下载

cnpm i vue-router -S

2.在index.js中引入路由的核心模块

import VueRouter from 'vue-router'

3.注册路由插件

Vue.use(VueRouter)

4.创建路由对象并且配置路径

这里有两种情况,一级路径 例如

"/film"可以如下写法即可,表示跳转/cinema页面渲染Cinema组件

注意:别忘了引入该组件

const routes = [
{
path: '/cinema',
component: Cinema
}
]

嵌套路由

这种情况下不会把cinema的组件内容覆盖 可以实现单组件切换内容 跟选项卡效果差不多

二级路径:"/film/nowplaying"

  {
path: '/film',
component: Film,
children: [{
path: '/film/nowplaying',
component: Nowplaying,
},
{
path: '/film/comingsong',
component: Comingsong,
}
]
},

5.将路由对象传递给Vue实例

const router = new VueRouter({
routes: routes
})
export default router

6.配置好之后,需要在显示留坑,否则无法显示在页面上

<router-view></router-view>

完整代码写法如下:

//index.js文件中引入
// 路由的核心模块
import VueRouter from 'vue-router'
import Cinema from '@/views/Cinema'
// 必须要加 注册路由插件
Vue.use(VueRouter)
// 路由映射表
const routes = [
{
path: '/cinema',
component: Cinema
},
]
const router = new VueRouter({
routes: routes
})
export default router

main.js

import router from './router'
//new Vue 启动
new Vue({
el: '#app',
//让vue知道我们的路由规则
router: router, //可以简写router
render: c => c(App),
})

3.vue-router跳转和传参

1.用name传递参数

在路由文件中配置name属性,组件中用 $router.name来接受

{
path: '/cinema',
name:'cinema'
component: Cinema
}
<!--获取-->
<p>{{ $router.name}}</p>

2.通过 标签中的to传参

<!--需要在路由映射中提前配置好-->
{
path: '/cinema',
component: Cinema
} <router-link :to="{path:'/cinema',params:{key:value}}">666</router-link>
<!--获取-->
{{$route.params.key}}

3.通过url地址栏传参数

  {
path: '/detail',
component: Detail
},
this.$router.push({path: '/detail', query: {data: datail}}
<!--获取-->
{{this.$route.query.data}}

4.vue-router实现的原理

SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。 单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面 ;vue-router在实现单页面前端路由时,提供了两种模式,根据mode参数来决定采用哪一种方式

两种模式

1、Hash模式:

单页面应用:页面跳转是无刷新的,但是url 每次变化的时候,都会造成页面的刷新,所以为了解决通过hash来实现路由,在改变 url的情况下,保证页面的不刷新

url hash 类似于

http://www.xxx.com/#/film

这种 #。后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。另外每次 hash 值的变化,还会触发hashchange 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作:

function matchAndUpdate () {
// todo 匹配 hash 做 dom 更新操作
}
window.addEventListener('hashchange', matchAndUpdate)

2、History模式:

history 模式时,URL 就像正常的 url,只需要在配置路由规则时,加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

const router = new VueRouter({
mode: 'history',
routes: [...]
})

注意:还需要后台配置支持,如果没有正确配置会返回404;服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

5.vue-router 有哪几种导航钩子?

解释:vue-router导航钩子 主要用来作用是拦截导航,让他完成跳转或取消

1. 全局导航钩子

全局导航钩子主要有两种钩子:前置守卫、后置钩子,

注册一个全局前置守卫:

const router = new VueRouter({ ... });
router.beforeEach((to, from, next) => {
// do someting
});
//to: Route,代表要进入的目标,它是一个路由对象
//from: Route,代表当前正要离开的路由,同样也是一个路由对象
//next: Function,这是一个必须需要调用的方法,而具体的执行效果则依赖 next 方法调用的参数

2. 路由独享的钩子

单个路由独享的导航钩子,它是在路由配置上直接进行定义的

cont router = new VueRouter({
routes: [
{
path: '/file',
component: File,
beforeEnter: (to, from ,next) => {
// do someting
}
}
]
});

3. 组建内的导航钩子

组件内的导航钩子主要有这三种:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。他们是直接在路由组件内部直接进行定义的

const File = {
template: `<div>This is file</div>`,
beforeRouteEnter(to, from, next) {
// do someting
// 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
// do someting
// 在当前路由改变,但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
// do someting
// 导航离开该组件的对应路由时被调用
}
}

6.$route 和 $router 的区别

$route :为当前router跳转对象里面可以获取name、path、query、params等

\(router :为VueRouter实例,想要导航到不同URL,则使用\)router.push方法

返回上一个history也是使用$router.go方法

7.vue-router响应路由参数的变化

例如从/user/foo导航到/user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用

路由参数的变化作出响应可以用以下方法:

1.watch监听,当路由发生变化的时候执行

watch:{

  $route(to,from){

        console.log(to.path);

        // 对路由变化作出响应...

  }

},

2.在父组件的router-view上加个key

<router-view :key="$route.fullPath"></router-view>

8.vue-router实现路由懒加载( 动态加载路由 )

const Foo = () => import('./Foo.vue')

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] })

//有时候想把某个路由下的所有组件都打包在同一个异步快中,需要使用命名chunk,一个特殊的注释语法来提供chunk name(webpack>2.4)

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

vue路由核心要点(vue-router)的更多相关文章

  1. vue路由登录拦截(vue router登录权限控制)

    实现原理: 哪些路由需要验证需要在路由文件router/index.js中指定: { path: '/', component: Home, name: 'Home', iconCls: 'fa fa ...

  2. vue路由配置,vue子路由配置

    上一篇关于vue环境配置已经写好了!按照操作就行了! 现在一个项目已经部署完成,接下来我们从路由开始! 还记得在初始化项目的时候,有提示是否需要安装vue-router,对没错,vue中路由全靠它! ...

  3. vue路由嵌套,vue動態路由

    https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...

  4. Vue.js—组件快速入门及Vue路由实例应用

    上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...

  5. vue路由守卫用于登录验证权限拦截

    vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...

  6. vue卸载与安装+vue创建项目

    vue卸载 npm uninstall -g vue-cli npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli ...

  7. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 下)

    大家好,在上一篇系列文章里,我们一起学习了路由的基本配置,如何创建路由和传参,本篇文章我们一起学习下 Navigation 导航和路由守卫的相关内容. Navigation 如果要改变当前路径,我们可 ...

  8. vue路由请求 router

    创建一个Router.js文件 // 路由请求//声明一个常量设置路菜单// import Vue from "vue/types/index";import Vue from ' ...

  9. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. 使用gravatar生成头像

    avatar代表您在线的图像,当你与网站互动时,你的名字旁边会出现一张图片. Gravatar是一个全球通用的头像.你只需上传一次并创建自己的个人资料,然后当你加入任何支持Gravatar的网站时,你 ...

  2. Scala实践14

    1.Scala的future 创建future import scala.concurrent._ import ExecutionContext.Implicits.global object Fu ...

  3. Java 用集合实现简单的斗地主发牌

    创建数组.集合,存放数据 public class FightAgainstLandlords { /** * poker集合,存储54张牌 */ private ArrayList<Strin ...

  4. SpringCloud-Hystrix原理

    Hystrix官网的原理介绍以及使用介绍非常详细,非常建议看一遍,地址见参考文档部分. 一 Hystrix原理 1 Hystrix能做什么 通过hystrix可以解决雪崩效应问题,它提供了资源隔离.降 ...

  5. Core 定时任务之HangFire

    ASP.NET Core 使用 Hangfire 很简单,首先,Nuget 安装程序包 > install-package Hangfire -pre 然后ConfigureServices添加 ...

  6. Java框架之SpringMVC 04-视图解析-Spring表单-JSON-上传下载

    SpringMVC 视图解析 请求处理方法(controller方法)执行完成后,最终返回一个 ModelAndView 对象,即使出现异常也会返回一个 ModelAndView 对象.对于那些返回 ...

  7. windows下配置tomcat的虚拟路径编译器为IDEA

    在tomcat中配置好后发现运行项目还是无效 我们需要打开tomcat的配置,把下方的红色区域勾选上即可生效 具体原因如下 那是由于默认时IDEA的热部署机制,会在以下路径: [C:\Users\系统 ...

  8. [bzoj2152] [洛谷P2634] 聪聪可可

    Description 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)--遇到这种问题,一般情况下石头剪刀布就好 ...

  9. VSCODE更改文件时,提示EACCES permission denied的解决办法(mac电脑系统)

    permission denied:权限问题 具体解决办法: 1.在项目文件夹右键-显示简介-点击右下角解锁 2.权限全部设置为读与写 3.最关键一步:点击"应用到包含的项目",这 ...

  10. 使用Route Prefix 使用属性路由 精通ASP-NET-MVC-5-弗瑞曼