| vue路由的几种方式 | 您所在的位置：网站首页 › 雷达的显示模式有哪几种 › vue路由的几种方式 |
vue路由的几种方式
|
1.嵌套路由
要注意，以 / 开头的嵌套路径会被当作根路径。 子路由不要加/ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ // 当 /user/:id 匹配成功， // UserHome 会被渲染在 User 的 中 { path: '', component: UserHome }, // ...其他子路由 ] } ] }) 2.动态路由动态路由应用场景就是封装好的一个组件复用,然后匹配多个路径. (1) 响应路由参数的变化 进入守卫 beforeRouteUpdate(动态路由发生变化的时候调用) beforeRouteUpdate(to,from,next){ console.log(to) next() }离开守卫 免战牌页面(404页面) **什么是守卫:**简单来说就是我让你来才能来我让你走才能走 1.全局守卫 2.路由独享守卫(要晚于组件内部的守卫) 借助 router 的实例方法，通过编写代码来实现导航称为编程式导航 router.push(location, onComplete?, onAbort?)注意: 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
history可以去掉#, 有坑(nginx找不到路径 会返回404) history模式利用history.pushState API来完成URL跳转而无须重新加载页面 解决办法 作用: 标识路由更加方便 const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象： User这跟代码调用 router.push() 是一回事： router.push({ name: 'user', params: { userId: 123 }})这两种方式都会把路由导航到 /user/123 路径。 6.命名视图(一个路径显示多个组件)有时候想同时 (同级) 展示多个视图，而不是嵌套展示 一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)： const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) 7.路由组件传参在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用 props 将组件和路由解耦： 取代与 $route 的耦合,通过 props 解耦 const User = { props: ['id'], template: 'User {{ id }}' } 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 } } ] }) 8.路由元信息meta字段（元数据） 直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了 { path: '/actile', name: 'Actile', component: Actile, meta: { login_require: false }, }, { path: '/goodslist', name: 'goodslist', component: Goodslist, meta: { login_require: true }, children:[ { path: 'online', component: GoodslistOnline } ] }这里我们只需要判断item下面的meta对象中的login_require是不是true，就可以做一些限制了 router.beforeEach((to, from, next) => { if (to.matched.some(function (item) { return item.meta.login_require })) { next('/login') } else next() }) 9.数据获取(导航之前获取数据,导航之后获取数据) 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。 10.滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在支持 history.pushState 的浏览器中可用。 11. 路由懒加载(必须依赖webpack,新能优化方法)为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 语法: const Foo= ()=>import(’./foo’) |
3.组件内的守卫 beforeRouteUpdata只有动态路由的时候调用 
replace可以节省内存 
router(拿到方法或属性) 
【本文地址】