Vue 应用系列笔记（二）关于路由 - Router

工具：webstorm

包管理工具: npm

使用npx创建基础vue 脚手架，这些最基础的部分，我们跳过，然后得到一个最基本的结构

 

通常而言，我们一个项目总要有多个页面，如何去控制页面间的跳转（也就是我们常说的路由了），这边使用Vue-Router,官方推荐就好了。

npm install vue-router

 

一、路由地址的分割

 

入口文件：main.js ，我们不需要把什么都扔进里面，适当的进行模块分割也是必要的。

 

1、糅合一起的路由（不便管理）

将路由全部塞与一个js内不便管理

//    router/index.js
import VueRouter from 'vue-router'
import hello from "@/view/hello"; //内部内容是随意的
import HelloWorld from "@/components/HelloWorld";//内部内容是随意的

const routes = [
    {
        path: '/',
        name: '1',
        component: hello
    },
    {
        path: '/hello'
        , name: '2',
        component: HelloWorld
    },
]

let Router = new VueRouter({
    routes
});
export default Router;

2、拆分路由

将部分大体的功能切开几个部分，下面分割为普通页面（page）与基础页面(view)

//    router/index.js
import VueRouter from 'vue-router' 
import PageRouter from './page/'    // router/page/index.js
import ViewsRouter from './views/'  // router/views/index.js

const routes = [].concat(PageRouter, ViewsRouter);

let Router = new VueRouter({
    routes
});
export default Router;

3、嵌套的路由（合并前缀相似的路由）

官方提示：要注意，以 / 开头的嵌套路径会被当作根路径

这样就可以整合 /base/hi 与 /base/hello 这样的路由，一般comment为一个整体的布局组件

{
 path: '/base',
    component: comment,
    children: [
      {
        path: 'hi',
        name: 'ADR术语字典',
        component: hello
      },
      {
        path: 'hello',
        name: '疾病字典项',
        component: HelloWorld
      },
}

4、重置/刷新页面 ->滚动位置

正如标题所指，下方则为恢复位置，对应文档 -> 传送门

let Router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop;
      }
      return {
        x: 0,
        y: to.meta.savedPosition || 0
      }
    }
  },
});

 

二、关于黑白名单

页面不总由得输入url即可进入，需要设置一点权限，我们可以通过全局前置守卫 来完成这点，传送门

设置一个常量类：

// config/website.js
export default {
    author: "coffeeandice",
    whiteList: ["/hello", "/404", "/401"],
}

创建一个拓展工具类：

//  router/router-plugin.js
import website from "@/config/website";

let RouterPlugin = function () {
    this.$router = null   //给你彻底干掉其他干扰的
}


//起个有点稳的方法名，给它赋值上去
RouterPlugin.install = function (router) {
    this.$router = router

    this.$router.$avueRouter = {
        //正则处理路由
        validPath: function (list, path) {
            let result = false;
            list.forEach(ele => {
                if (new RegExp("^" + ele + ".*", "g").test(path)) {
                    result = true
                }
            });
            return result;
        },
    }

    this.$router.beforeEach((to, from, next) => {
        if (router.$avueRouter.validPath(website.whiteList, to.path)) {
            next()
        } else {
            next('/hello')
        }
    })
}


export default RouterPlugin;

上面提及的路由 router/index.js

//    router/index.js
import VueRouter from 'vue-router' 
import PageRouter from './page/'    // router/page/index.js
import ViewsRouter from './views/'  // router/views/index.js
import RouterPlugin from './router-plugin'  // 拓展工具类

const routes = [].concat(PageRouter, ViewsRouter)

let Router = new VueRouter({
    routes
});

RouterPlugin.install(Router) //添加全局前置守卫，配置
export default Router

三、其他部分

1、函数式编程更为常用

一般来说，更细的页面呢，下面这个类似a 标签方式会比较少用

 <router-link to="/foo">Go to Foo</router-link>

官方实例就直接搬过来了，总体说明就是： 有path就name不生效

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

常用的路由这边怎么配，也就是官网提及的 动态路由匹配 ，接收方这边怎么直接调用方便

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

例1：
//  则/user/123
// 对应User 组件内
this.$route.params 出现参数  { id: '123' }


例2：
//  若{ path: '/user/:id/hi/:kangkang', component: User }
//  则/user/123/hi/ahda
// 对应User 组件内
this.$route.params 出现参数  { id: '123' ,kangkang:'ahda'}

2、离开当前路由时提醒

官方实例直接搬运，这个部分也是常用到的一个方法，在表单类。

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

3、路由优化（延迟加载）

如果带宽不够，打包觉得很大的话，可以下列方式导入，就可以按需下载，首页页面加载速度有一定帮助

  {
        path: 'hi',
        name: 'hi',
        component: (resolve) => require(['@/view/hello'], resolve)
  },

 

四、其他问题

1、某些情况下会出现<router-view>无法辨识的问题

      这时，我们需要使用Vue.use 来安装VueRouter