• 欢迎来到本博客,希望可以y一起学习与分享

vue-router

JavaScript/Jquery benz 2年前 (2019-03-06) 72次浏览 0个评论 扫描二维码

目录

文章目录[隐藏]

一、安装与引入vue-router

安装:npm i vue-router
使用vue-router的步骤:
引入vue-router –> 声明使用vue-router –> 实例vue-router –> 将vue-router实例注册到vue全局
在vue入口文件下写代码。

合理结构调整

一般不会把所有代码写在一个文件中,创建一个目录routes,里面放的是路由规则文件,现在创建一个名为routes.js的路由文件:

创建router.js文件,这个文件用来实例vue-router:

最后到入口文件注册一下:

添加router-view标签

router-view标签,是用来指定路由的页面渲染节点,在根组件App.vue下添加router-view标签,表示路由切换的页面渲染到这里:

二、router-link:制作导航

router-link的基本使用

router-link 是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接地址。
注意:被选中的router-link将自动添加一个class属性值.router-link-active。

  • to:导航路径,要填写的是你在router/index.js文件里配置的path值,如果要导航到默认首页,只需要写成 to=”/” ,
  • [text] :就是我们要显示给用户的导航名称。

router-link各个属性的作用及用法

vue-router是vue单页面开发的路由,就是决定页面跳转的!

组件支持用户在具体有路由功能的应用中(点击)导航。通过to属性指定目标地址。

1、to

表示目标路由的链接。当被点击后,内部会立刻把to的值传到router-push()。

2、replace

设置replace属性的话,当点击时,会调用roter.replace()而不是router.push(),所以导航后不会留下history记录,也就是不能回退到上一个页面

3、append

设置append属性后,则在当前路径前添加基路径,例如,我们从/a导航到一个相对路径b,如果没有配置append,则路径为/b,如果配了,则为/a/b

4、tag

有时候想要 < router-link> 渲染成某种标签,例如 < li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

5、active-class

这个属性是设置激活链接时class属性,也就是当前页面所有与当前地址所匹配的的链接都会被添加class属性

active-class属性的默认值是router-link-active,所以如果没有设置,就会被渲染为这个class

可以在router.js里面设置

6、exact

“是否激活”,默认是false 。举个粟子,如果当前的路径是/a 开头的,那么 也会被设置css类名

按照这个规则, 将会点亮各个路由!想要链接使用”exact匹配模式”,则使用exact属性:

7、events

声明可以用来触发导航的事件(默认是‘click‘)。可以是一个字符串或者是一个包含字符串的数组

8、将”激活时的css类名”应用在外层元素

有时候我们要让”激活的css类名”应用在外层元素,而不是标签本身,那么可以用渲染外层元素,包裹着内层的原生标签

9、方法

router-link默认是触发router.push(location),如果设置的replace 则触发router.replace(location),这有啥区别呢?

router.push() :导航跑到不同的URL,这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的url.

router.replace():跟router.push作用是一样的,但是,它不会向history添加新记录,而是跟它的方法名一样替换掉当前的history记录.

router.go(n):这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.Go(n)

三、router-view: 用于渲染匹配到的组件

①.可以给router-view组件设置transition过渡Vue2.0 Transition常见用法全解惑)。

css过渡类名:
组件过渡过程中,会有四个CSS类名进行切换,这四个类名与transition的name属性有关,比如name=”fade”,会有如下四个CSS类名:

  • fade-enter:进入过渡的开始状态,元素被插入时生效,只应用一帧后立刻删除。
  • fade-enter-active:进入过渡的结束状态,元素被插入时就生效,在过渡过程完成后移除。
  • fade-leave:离开过渡的开始状态,元素被删除时触发,只应用一帧后立刻删除。
  • fade-leave-active:离开过渡的结束状态,元素被删除时生效,离开过渡完成后被删除。

从上面四个类名可以看出,fade-enter-activefade-leave-active在整个进入或离开过程中都有效,所以CSS的transition属性在这两个类下进行设置。

过渡模式mode:

  • in-out(mode默认in-out模式):新元素先进入过渡,完成之后当前元素过渡离开。
  • out-in:当前元素先进行过渡离开,离开完成后新元素过渡进入。

②.还可以配合<keep-alive>使用,keep-alive可以缓存数据,这样不至于重新渲染路由组件的时候,之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后,点击进入另一个路由组件b,再回到路由组件a的时候之前的DOM操作还保存在,如果不加keep-alive再回到路由组件a时,之前的DOM操作就没有了,得重新进行。如果你的应用里有一个购物车组件,就需要用到keep-alive。

四、vue-router参数配置

mode:路由模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

Vue路由设置mode模式为History 中页面404的原因及解决

我们使用vue+vue-router创建单页面应用的时候,一般会在router中设置mode:history,让我们的url更美观,也利于seo,如果单单只是设置的了这个,当页面刷新或者是手动添加路径的时候就会报404错误.。
当我们设置了mode为history时,当前端发送路径给服务端时,服务端根本就不认识省去#的url,所以返回给我们404。
解决方法,请看下图,在webpack.config.client.js 的devServer中设置:

如果webpack.config.base.js中的output设置了基路径,那么historyApiFallback也要添加:

base:路由基路径

  • 类型: string
  • 默认值: "/"应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

linkActiveClass 与 linkExactActiveClass:控制router-link的选中样式

linkActiveClass

  • 类型: string
  • 默认值: "router-link-active"配置 <router-link> 的默认“激活 class 类名”。

全局配置:需要到vue-router实例配置项里面配置,所有router-link生效:

局部配置:直接到router-link配置active-class,那个router-link配置,那个生效:

linkExactActiveClass

  • 类型: string
  • 默认值: "router-link-exact-active"配置 <router-link> 精确激活的默认的 class。

全局配置:需要到vue-router实例配置项里面配置,所有router-link生效:

局部配置:直接到router-link配置exact-active-class,那个router-link配置,那个生效:

linkActiveClass 和 linkExactActiveClass 的区别以及exact的作用

router-link 默认情况下的路由是模糊匹配,例如当前路径是 /article/1 那么也会激活 ,所以当设置 exact-active-class 以后,这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的class。

例如

当用户访问 /article/1 时会被激活为

而当使用

当用户访问 /article/1 时,不会激活这个link的class

不同之处就是 linkActiveClass 可以把这个包含在这个链接内的都会变色, 但是linkActiveExactClass 只会精准查找到,此时可以看出exact跟linkExactActiveClass 的作用是相同的。

当用的linkActiveClass时,加上exact就脱离了模糊匹配,用的是精准匹配。

scrollBehavior:滚动行为

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息,长这样:

  • { x: number, y: number }
  • { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注:falsy 不是 false参考这里)的值,或者是一个空对象,那么不会发生滚动。

举例:

对于所有路由导航,简单地让页面滚动到顶部。

返回 savedPosition,在按下 后退/前进 按钮时,就会像浏览器的原生表现那样:

如果你要模拟『滚动到锚点』的行为:

parseQuery / stringifyQuery:提供自定义查询字符串的解析/反解析函数

parseQuery / stringifyQuery(2.4.0+): Function

提供自定义查询字符串的解析/反解析函数。覆盖默认行为。

fallback:路由模式的浏览器兼容

fallback(2.6.0+): boolean

当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。

在 IE9 中,设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用,因为一个 hash 模式的 URL 并不支持服务端渲染。

五、路由参数传递

1.用name传值(不推荐)

2.通过 标签中的to传参

  • name:就是我们在路由配置文件中起的name值。
    另:命名路由就是用一个名称来标识一个路由,在定义路由的时候设置一个name属性即可。在router-link中也可以用路由的名字来链接到一个路由。
  • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
    最后用$route.params.username进行接收.

3.用path的url传参

上面第五点也有提到。 :冒号的形式传递参数
(1).在router路由配置文件里以冒号的形式设置参数

(2).组件形式,在src/components目录下建立我们params.vue组件。
我们在页面里输出了url传递的参数。

(3).标签path路径中传值

(4).正则表达式在URL传值中的应用
希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,path:'/params/:newsId(\\d+)/:userName'

query的url传参

query的url传参不需要配置任何东西,只要在访问地址加上参数,就可以通过$route对象的query属性获取到值。比如:http://www.example.com?id=1&name=zhangsan,就可以通过this.$route.query获取到值。

全局路由对象:$route

在组件里,可以使用this.$route来获取(是$route,不要拼写错了),当前匹配到路由的所有信息。

六、路由组件传参

路由组件传参一样需要:props,属性,通过props我们不用在组件中用{{ $route.params.id }}获取属性值,而可以直接把route.params 设置为组件属性。

使用 props 将组件和路由解耦:

(1) 不用props

(2)通过 props 解耦

这样你便可以在任何地方使用该组件,使得该组件更易于重用和测试。

如果 props 被设置为 trueroute.params 将会被设置为组件属性。

(3)如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。

(4)函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。

请尽可能保持 props 函数为无状态的,因为它只会在路由发生变化时起作用。如果你需要状态来定义 props,请使用包装组件,这样 Vue 才可以对状态变化做出反应。

 

七、路由的配置

命名路由

有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。我个人理解就相当于给路径取个名字,调用的时候,这个名字就指这个路径,不然有些路径很长,直接写太麻烦。

要链接到一个命名路由,可以给 router-link 的 to 属性传一个对象:

这跟代码调用 router.push() 是一回事:

这两种方式都会把路由导航到 /user/123 路径。

路由元信息:meta

定义路由的时候可以配置 meta 字段:

那么如何访问这个 meta 字段呢?

首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录。

例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路由对象)的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段:

解析:

1、meta 字段就是路由元信息字段,requiresAuth 是自己起的字段名称,用来标记这个路由信息是否需要检测,true 表示要检测,false 表示不需要检测(这个名称随便起,比如我自己的就起的 requiresId,建议起个有意义的名称)

2、if (to.matched.some(record => record.meta.requiresAuth) ),如果对这类写法不熟悉,可以去看看es6的箭头函数,这句话就是返回遍历的某个路由对象,我们定义为为record,检测这个对象是否拥有meta这个对象,如果有meta这个对象,检测它的meta对象是不是有requiresAuth这个属性,且为true,如果满足上述条件,就确定了是这个/foo/bar路由。

3、this route requires auth, check if logged in ,说明auth信息是必须的,检验是否登录,也就是在这个路由下,如果检测到auth这个用户名,那么进行下一步操作!

4、案例下面就有了判断,if (!auth.loggedIn()),通过自己封装的检验方法auth.loggedIn(),检验用户是否登录,从而决定渲染下一步操作!

总结,vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可!其实比较简单,大家可以研究下。

Array some() 方法

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测
  • 如果没有满足条件的元素,则返回false。

  注意: 1、some() 不会对空数组进行检测。 2、some() 不会改变原始数组。

1、语法:array.some(function(currentValue,index,arr),thisValue)

2、参数说明:

function(currentValue, index,arr):必须。函数,数组中的每个元素都会执行这个函数

函数参数:

  • currentValue:必选。当前元素的值
  • index:可选。当前元素的索引值
  • arr:可选。当前元素属于的数组对象
  • thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,”this” 的值为 “undefined”

3、返回值:布尔值。如果数组中有元素满足条件返回 true,否则返回 false。

路由重定向:redirect 与路由别名:alias

刚进入应用都是进入到“/”这个路由的,如果想直接进入到“/goods”怎么办,有两种方法。一种是利用重定向,另一种是利用vue-router的导航式编程。
redirect基本重定向:

甚至是一个方法,动态返回重定向目标:

注意:导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。

★.这里不得不提到alias别名的使用。
1.首先我们在路由配置文件里给路径起一个别名,dxl。

2.配置我们的,起过别名之后,可以直接使用标签里的to属性,进行重新定向。

重定向和别名的区别

重定向:当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?

 别名:/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a一样。

上面对应的路由配置为:

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

总结:

  • redirect:仔细观察URL,redirect是直接改变了url的值,把url变成了真实的path路径。
  • alias:URL路径没有别改变,这种情况更友好,让用户知道自己访问的路径,只是改变了<router-view>中的内容。

★★★.注意一个大坑:
别名alias在path为’/’中,是不起作用的。

嵌套路由:children

注意,子路由的组件,要有router-view标签。否则,可能不显示。
要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

八、命名视图

有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):

嵌套命名视图

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例:

  • Nav 只是一个常规组件。
  • UserSettings 是一个视图组件。
  • UserEmailsSubscriptionsUserProfileUserProfilePreview 是嵌套的视图组件。

UserSettings 组件的 <template> 部分应该是类似下面的这段代码:

然后你可以用这个路由配置完成该布局:

九、导航守卫

有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。

为此我们有很多种方法可以植入路由的导航过程:全局的, 单个路由独享的, 或者组件级的,推荐优先阅读路由文档

全局守卫

vue-router全局有三个守卫:

  1. router.beforeEach 全局前置守卫 进入路由之前
  2. router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
  3. router.afterEach 全局后置钩子 进入路由之后

使用方法

每个守卫方法接收三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。这个参数是个函数,且必须调用,否则不能进入路由(页面空白)。
    • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    • next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: truename: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法,否则钩子就不会被 resolved。

全局后置钩子router.afterEach()和守卫不同的是,router.afterEach()钩子不会接受 next 函数也不会改变导航本身。

这类钩子主要作用于全局,一般用来判断权限,以及页面丢失时候需要执行的操作,例如:

路由独享的守卫

如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫。路由独享的守卫只有beforeEnter,在进入前执行,to参数就是当前路由。

你可以在路由配置上直接定义 beforeEnter 守卫:

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

路由组件内的守卫:

  1. beforeRouteEnter 进入路由前
  2. beforeRouteUpdate (2.2) 路由复用同一个组件时
  3. beforeRouteLeave 离开当前路由时

beforeRouteEnter访问this

因为钩子在组件实例还没被创建的时候调用,所以不能获取组件实例 this,可以通过传一个回调给next来访问组件实例 。

但是回调的执行时机在mounted后面,所以在我看来这里对this的访问意义不太大,可以放在created或者mounted里面。

beforeRouteLeave:

导航离开该组件的对应路由时调用,我们用它来禁止用户离开,比如还未保存草稿,或者在用户离开前,将setInterval销毁,防止离开之后,定时器还在调用。

关于钩子的一些知识:

★路由钩子函数的错误捕获

如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误,可以这样捕获:

在路由文档中还有更多的实例方法:动态添加路由等,有兴趣可以了解一下。

★跳转死循环,页面永远空白

我了解到的,很多人会碰到这个问题,来看一下这段伪代码:

看逻辑貌似是对的,但是当我们跳转到login之后,因为此时还是未登录状态,所以会一直跳转到login然后死循环,页面一直是空白的,所以:我们需要把判断条件稍微改一下。

★全局后置钩子的跳转:

文档中提到因为router.afterEach不接受next函数所以也不会改变导航本身,意思就是只能当成一个钩子来使用,但是我自己在试的时候发现,我们可以通过这种形式来实现跳转:

★此处常用于数据获取

  • 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
    当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。
    假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:

  • 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后再执行导航。
    通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据,当数据获取成功后只调用 next 方法。

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

  1. 触发进入其他路由。
  2. 调用要离开路由的组件守卫beforeRouteLeave
  3. 调用局前置守卫:beforeEach
  4. 在重用的组件里调用 beforeRouteUpdate
  5. 调用路由独享守卫 beforeEnter
  6. 解析异步路由组件。
  7. 在将要进入的路由组件中调用beforeRouteEnter
  8. 调用全局解析守卫 beforeResolve
  9. 导航被确认。
  10. 调用全局后置钩子的 afterEach 钩子。
  11. 触发DOM更新(mounted)。
  12. 执行beforeRouteEnter 守卫中传给 next 的回调函数

十、动态路由匹配

我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。
调用router的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。例如:’/home’是一条路由的key,它表示路径;{component: Home}则表示该条路由映射的组件:

例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用『动态路径参数』来达到这个效果。

例如: /user/foo 和 /user/bar 都将映射到相同的路由。
一个『路径参数』使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到this.$route.params,可以在每个组件内使用。
你可以在一个路由中设置多段『路径参数』,对应的值都会设置到 $route.params 中。例如:

十一、响应路由参数的变化

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
复用组件时,想对路由参数的变化作出响应的话:
(1). watch(监测变化) $route 对象:

(2).beforeRouteUpdate 导航守卫
如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate来响应这个变化 (比如抓取用户信息)。

十二、实现不同路由不同页面标题

十三、编程式导航

1.router.push( )
想要导航到不同的 URL,则使用 router.push (在创建vue实例并挂载后调用)。router.push方法就是用来动态导航到不同的链接的,这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to=”…”> 等同于调用 router.push(…)。

注意:
如果提供了 path,params 会被忽略,而 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:

2.router.replace( )
router.replace跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。


3.router.go(n)
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。

自定义一个goback()方法,并使用this.$router.go(-1),进行后退操作

十四、Vue异步组件

1.什么是异步组件?

异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存,缓存是以备下次访问。

2.Vue异步组件的定义使用

这个需要安装一个babel插件:npm install babel-plugin-syntax-dymatic-import,并到babel的配置文件.babelrc配置一下插件:


文章 vue-router 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!