vue路由的几种方式

1.嵌套路由

要注意，以 / 开头的嵌套路径会被当作根路径。 子路由不要加/

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }
  ]
})

2.动态路由

动态路由应用场景就是封装好的一个组件复用,然后匹配多个路径.
(1) 响应路由参数的变化

3.路由守卫

进入守卫
beforeRouteUpdate(动态路由发生变化的时候调用)

beforeRouteUpdate(to,from,next){
	console.log(to)
	next()
}

离开守卫

免战牌页面(404页面)

**什么是守卫:**简单来说就是我让你来才能来我让你走才能走
1.全局守卫

• 全局前置守卫
• 全局解析守卫
• 全局后置钩子

2.路由独享守卫(要晚于组件内部的守卫)

3.组件内的守卫
beforeRouteUpdata只有动态路由的时候调用

4.编程式导航

借助 router 的实例方法，通过编写代码来实现导航称为编程式导航

	router.push(location, onComplete?, onAbort?)

注意: 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

replace可以节省内存

router(拿到方法或属性)

history可以去掉#, 有坑(nginx找不到路径 会返回404)
history模式利用history.pushState API来完成URL跳转而无须重新加载页面
解决办法

5.命名路由

作用: 标识路由更加方便

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

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

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

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

router.push({ name: 'user', params: { userId: 123 }})

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

6.命名视图(一个路径显示多个组件)

有时候想同时 (同级) 展示多个视图，而不是嵌套展示

<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,
        a: Bar,
        b: Baz
      }
    }
  ]
})

7.路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

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

取代与 $route 的耦合,通过 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 }
    }
  ]
})

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’)