vue-router可以做的事情

路由懒加载配置
改变单页面应用的title
登录权限校验
页面缓存配置

路由懒加载配置

Vue项目中实现路由按需加载（路由懒加载）的3种方式：

//1、Vue异步组件技术
{
    path:'/home',
    name:'Home',
    component: resolve => reqire(['../views/Home.vue'], resolve)
}

//2、es6提案的import()
{
    path:'/',
    name:'home',
    component: () => import('../views/Home.vue')
}

//3、webpack提供的require.ensure()
{
    path:'/home',
    name:'Home',
    component: r => require.ensure([],() => r(require('../views/Home.vue')), 'home')
}

改变单页面应用的title

由于单页面应用只有一个html，所有页面的title默认是不会改变的，但是我们可以在路由配置中加入相关属性，再在路由守卫中通过js改变页面的title

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
})

登录权限校验

在应用中，通常会有以下的场景，比如商城：有些页面是不需要登录即可访问的，如首页，商品详情页等，都是用户在任何情况都能看到的；但是也有是需要登录后才能访问的，如个人中心，购物车等。此时就需要对页面访问进行控制了。

此外，像一些需要记录用户信息和登录状态的项目，也是需要做登录权限校验的，以防别有用心的人通过直接访问页面的 url 打开页面。

此时。路由守卫可以帮助我们做登录校验。具体如下：

1、配置路由的 meta 对象的 auth 属性

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/Home.vue'),
        meta: { title: '首页', keepAlive: false, auth:false},
    },
    {
        path: '/mine',
        name: 'mine',
        component: () => import('../views/mine.vue'),
        meta: { title: '我的', keepAlive: false, auth:true},
    }
]

2、在路由首页进行判断。当to.meta.auth为true(需要登录)，且不存在登录信息缓存时，需要重定向去登录页面

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    const = useInfo = sessionStorage.getItem('useInfo') || null
    if(!useInfo && to.meta.auth){
        next('/logn')
    }else {
        next()
    }
})

页面缓存设置

项目中，总有一些页面我们是希望加载一次就缓存下来的，此时就用到 keep-alive 了。keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素

1、通过配置路由的 meta 对象的 keepAlive 属性值来区分页面是否需要缓存

const routes = [
    {
        path: '/',
        name: 'home',
        component: () => import('../views/Home.vue'),
        meta: { title:'首页', keepAlive:false, auth:false},
    },
    {
        path: '/list',
        name: 'list',
        component: () => import('../views/list.vue'),
        meta: { title:'首页', keepAlive:true, auth:false}, //keepAlive的值为true，这个页面就需要缓存起来
    }
]

2、在 app.vue 做缓存判断

<div id="app">
  <router-view v-if="!$route.meta.keepAlive"></router-view>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
</div>

3、query和params区别

1、使用query传参的时候，name，path都可以引入，但使用params传参的时候只能使用name进行引入。
2、接收参数的时候使用this.$ route.params.name或者this.$ route.query.name
3、params动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面
4、query传参的url展现方式：/detail?id=1&user=123&identity=1&更多参数
   params＋动态路由的url方式：/detail/123

4、路由跳转的几种方式

跳转路由的几种方式：
 
  1、声明式： 1) 根据路由路径（/home/sort/detail）跳转 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">点击查看子页面</router-link>
             2) 根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>
                :to=""  可以实现绑定动态的 路由 和 参数
 
  2、编程式： 1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})
             2） this.$router.push({name: 'detail',params:{id: 'abc'}})
 
    备注： params 和 query 传参的区别：
            1、params传参时  参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失
            2、query传参时   参数出现在url的路径上面， 刷新页面时query里面的数据不变

vue-router那点事