Vue-Router base (III): fallback, named routing, meta, children, transition

fallback

First, because not all browsers support history in the form of front-end routing.

So in case the browser does not support, vue will automatically give us a fallback to hash mode.

If you feel you do not need vue help us do this, you can give it up as a fallback: false.

But if doing so, we will become a one-page application multi-page applications.

Every time we jump will be routed to our back end, and then go to return to the new content. This is more time-consuming.

So in general, we will go to set fallback: true, automatically to deal with it.

 

Route name:

We can give the route a name, name: 'xxx'. The name can not have any relationship with the path.

So what does it do with it? We can jump a route by name.

We originally to = '/ hello' changed: to = "{name: 'hello'}".

Because we preach is a json object, vue we hope to resolve it, rather than to deal with it as a string, so we need a data binding with v-bind.

The wording and direct write string effect is exactly the same, so why use it?

Because, if your project is only 2 pages use the same route, then not so much.

Time if a project involves routing the same page there are dozens, later need to change a route, you need to go to dozens of pages, one by one change, so it is more difficult to maintain.

And with a name, which only need to configure the routing change it once. This is the name of the route usefulness.

 

meta

In fact, meta information is used to preserve some of the routes inside.

Because we know that at the time of writing html, we will write some meta tags in the head inside, we called the source's information page.

Then the information will help us to deal with some SEO stuff, for example, we use the description.

那么搜索引擎会根据 description 里面的内容,去排列它们的一个搜索结果。

因为这些信息我们在写 vue 组件的时候,很难在组件里面去写这些东西。

那么我们就可以在路由配置里面,去给每个配置加个 meta。我们可以在 meta 里面写任何你想用到的一些东西。

这些信息,你都可以在拿到路由 route 对象的时候,你可以通过 this.$route.meta 去拿到,然后你可以去进行一些操作。

首先你要知道,你在路由配置里面,不是你传的所有东西,你在拿到路由 route 对象的时候,都可以拿到你写在里面的内容,它是有规定的。

所以一般来说,一些跟路由没什么关系的配置,你基本上都要写在 meta 里面,才能在你想用的时候去拿到它。不然的话会被 vue 进行一个忽视。

 

children

children 它也是一个数组。它就跟我们路由最外层的列表一样。它是在某个路由下面配置的子路由。比如:

有了这个 children 之后,我们的路径可以去访问 /hello/test。当然我们现在是访问不到的。

我们可以看到,跟我们现在访问的页面,没有任何的区别。这是因为我们没有加 <router-view />。

因为我们路由匹配的内容,其实都是通过 router-view 这个占位符,把它去显示进去的。

也就是说我们声明了这个路径,它的组件是 Login。那么这个 Login 组件要放到哪个地方去呢,就是 router-view 所占据的地方。

当路由匹配到这个路径的时候,它就会占据到 router-view 这个位置。

既然我们是给 /hello 下面去加了一个 children,那么它这个 router-view,就肯定是在 Hello 这个组件里面的。

所以我们要在 Hello 组件里面去放一个 router-view,然后在匹配到 /test 路径的时候,它就会去显示这个 Login。

这就是一个嵌套路由的概念。就是我们的路由下面,可以放它的子路由,然后子路由显示的内容,你可以根据 router-view 做一个显示。

 

transition

vue 里面是有一个 transition 的东西,也就是一个过渡的动画。我们可以在 router-view 外面,给它包一层 transition。

transition 的功能:它可以给我们的组件加上一些,显示和消失,或者是其他的一些东西提供给我们一些过渡的动画。

加了 transition 之后,我们再切换路由就可以看到,有一个渐入渐出的效果了。

如果你要在给单个组件上面,去使用一个 transition 的效果,你只需要把这个 transition 包裹住单个组件就可以了。

你如果包裹住一个 router-view,那么它会作用于每一个路由的切换。

发布了61 篇原创文章 · 获赞 3 · 访问量 4404

Guess you like

Origin blog.csdn.net/weixin_43921436/article/details/97422227