vue-router相信大家都不陌生,并且很多都有实战经验。可能有很多你忽略的一些点。
1、丑陋的hash值
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
当你使用 history 模式时,URL 就像正常的 url,例http://yoursite.com/user/id,也好看!但是这种模式需要后端支持,否则就会返回404,所以最好在服务器端加一个覆盖所有情况的候选资源:匹配不到就返回同一个index.html,即你app的依赖页面。
nginx的配置:
location / {
try_files $uri $uri/ /index.html;
}
但是这里有个问题你所有的访问都只会跳转到index.html页面了,这样就没有达到路由的目的了。别担心,看下面的例子
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = { '/': Home, '/about': About}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname //获取当前地址
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})
这样就会根据当前地址去找到对应的路由跳转。
2、动态路由匹配
(1)路由参数匹配
假设我们有个页面,只是想要根据不同的参数来显示不同的页面,如:/user/foo 和 /user/bar 都将映射到相同的路由,但是根据参数foo/bar来显示不同的页面。
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
“路径参数”使用冒号 : 标记,当匹配到一个路由时,参数值会被设置到 this.
![ee50d18afebdfb65dcc78fa17e537d47.png](https://i-blog.csdnimg.cn/blog_migrate/5a00230c3cc1b2c48f814038c5c9d12c.png)
3、同级展示多个视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这时就可以使用命名视图了。如果 router-view 没有设置name名字,那么默认为 default。
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s):
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo, //default 默认的router-view名字
a: Bar,
b: Baz
}
}
]
})
4、重定向和别名
“重定向”的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b。 routes 配置来完成,下面例子是从 /a 重定向到 /b:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法,动态返回重定向目标:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为 /a 路由添加一个 beforeEach 或 beforeLeave 守卫并不会有任何效果。
别名:/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
5、路由组件传参
在组件中使用 route.params可以在组件内使用。因此我们可以根据参数去更新我们的模版。注意:当使用路由参数跳转的时候,原来的组件实例会被复用。(不会销毁再创建,因此组件的生命周期钩子不会再被调用)3、同级展示多个视图有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar(侧导航)和main(主内容)两个视图,这时就可以使用命名视图了。如果router−view没有设置name名字,那么默认为default。¨G4G一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用components配置(带上s):¨G5G4、重定向和别名“重定向”的意思是,当用户访问/a时,URL将会被替换成/b,然后匹配路由为/b。routes配置来完成,下面例子是从/a重定向到/b:¨G6G重定向的目标也可以是一个命名的路由:¨G7G甚至是一个方法,动态返回重定向目标:¨G8G注意导航守卫并没有应用在跳转路由上,而仅仅应用在其目标上。在下面这个例子中,为/a路由添加一个beforeEach或beforeLeave守卫并不会有任何效果。别名:/a的别名是/b,意味着,当用户访问/b时,URL会保持为/b,但是路由匹配则为/a,就像用户访问/a一样。¨G9G5、路由组件传参在组件中使用route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。使用 props 将组件和路由解耦。
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
6、过渡动效
是基本的动态组件,所以我们可以用 组件给它添加一些过渡效果:
<!-- 使用动态的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
7、数据获取
有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:
导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。created
导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。beforeRouteEnter
从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。
8、滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
当创建一个 Router 实例,你可以提供一个 scrollBehavior 方法:
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
// 对于所有路由导航,简单地让页面滚动到顶部。
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
如果你觉得本文对您有用可扫码关注我的微信公众号,会为您带来更多的精彩内容
![751e8183cc66ae0e880f1e8f8c284b16.png](https://i-blog.csdnimg.cn/blog_migrate/0faf0f58a93cad75d4eacec7d0a77280.jpeg)