vue-router 你可能忽略的知识点

vue 专栏收录该内容
1 篇文章 0 订阅

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: {  
    currentRoutewindow.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.

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'redirectto => {
// 方法接收 目标路由 作为参数
// 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()使routerviewnamedefault¨G4G使使components(s)¨G5G4访/aURL/b/broutes/a/b¨G6G¨G7G¨G8G/abeforeEachbeforeLeave/a/b访/bURL/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: { defaulttrue, 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 }
}

如果你觉得本文对您有用可关注我的微信公众号 前端爱好者社区,会为您带来更多的精彩内容

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值