简单整理vue-router,路由知识

1.项目中引入

1.1 安装注册

1.2 封装抽离

在main.js中 书写,会造成单个js文件过于臃肿的情况,需要将路由配置部分抽离出来,在src下新建router文件夹,新建index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import myMap from '../views/mymap.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',//路由重定向
    name: 'home',
    component: HomeView
  },
  {
    path: '/mymap',
    name: 'myMap',
    component: myMap
  },
]
const router = new VueRouter({
  //mode: 'history' //不写就是默认哈希模式,写了就是历史模式
  base: '/test/', //nginx部署时需要的配置项
  routes
})

export default router

通过export default 将router实例导出,再带入到main.js中

1.3 路由懒加载

其中可以采用路由懒加载的写法去加载页面,提高页面初始化速度

  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },

• component 是路由配置中的一个字段，用于指定当前路由的组件。
• () => import(‘path/to/component’) 是 ES6 中的箭头函数语法，用于定义一个动态导入，意味着在需要时才会加载对应的组件。
• /* webpackChunkName: “about” */ 是 webpack 的注释语法，用于为动态导入的文件指定一个 chunk 名称，以便在构建时生成对应的代码块。
• ‘…/views/AboutView.vue’ 是要动态导入的组件的路径。

2. 路由层级

项目中的路由层级基本不会超过三级,以一个demo示例

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: MainLayout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          path: 'about',
          component: About
        },
        {
          path: 'products',
          component: Products,
          children: [
            {
              path: 'detail/:id',
              component: ProductDetail
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
})

3.路由跳转/传参

3.1 声明式导航

//跳转到配置的路径为'/index'的页面
<router-link to="/index">点我跳转</router-link>

3.1.1query参数传递

//A页面查询参数传递
<router-link to="/index?words=123">点我跳转</router-link>

//B页面接收参数
console.log(this.$route.query.words, 'message')//打印结果123 message

//动态传递query参数,A页面
<router-link :to="{name:'weChat',query:{message:message}}">去聊天室</router-link>

//接收数据,B页面
console.log(this.$route.query.message, 'message')

3.1.2 params参数传递

//A页面传参
<router-link :to="{name:'weChat',params:{message:message}}">去聊天室</router-link>

//B页面接收参数
console.log(this.$route.params.message, 'message')

3.2 编程式导航

3.2.1 根据path传参传递query数据

//A页面传参
   todoSomething () {
      this.$router.push({
        path: '/weChat',
        query: {
          id: this.message
        }
      })
    }
//B页面接收
 console.log(this.$route.query.id, 'message')

3.2.2 根据path传参传递params数据(不推荐)

在实际使用中，通过 path 传递参数时，并不能直接在目标页面的组件中通过 $route.params 获取到参数值，因为 path 传递参数是基于路由配置中动态参数的匹配，而非通过 params 属性传递参数。

//路由配置
{
    path: '/weChat/:id',
    name: 'weChat',
    component: weChat
  }
//A页面传参

   todoSomething () {
   	  const id = this.message
      this.$router.push({
        path: `/weChat/${id}`,
      })
    }
//B页面接收
 console.log(this.$route.params.id, 'message')

3.2.3 根据name传参传递query数据

//A页面传参
 todoSomething () {
      this.$router.push({
        name: 'weChat',
        query: {
          id: this.message
        }
      })
    }
    //B页面接收
 console.log(this.$route.query.id, 'message')

3.2.4 根据name传参传递params数据

//A页面传参
   todoSomething () {
      this.$router.push({
        name: 'weChat',
        params: {
          id: this.message
        }
      })
    }
//B页面接收
 console.log(this.$route.params.id, 'message')

4. router与route

$router 对象：代表 Vue Router 实例，可以用来导航到不同的路由。
我们可以通过$router.push()$router.replace()、$router.go() 等方法来控制路由跳转。
通常在组件内部通过 this.$router 来访问该对象。

$route 对象：代表当前活跃的路由对象，可以用来访问当前路由的信息。例如当前路径、参数、查询参数等。
我们可以通过 $route.path、$route.params、$route.query 等属性来获取当前路由的信息。
通常在组件内部通过 this.$route 来访问该对象。

5.动态添加路由

// 定义要添加的路由
const newRoute = {
  path: '/new-route',
  component: () => import('./components/NewRoute.vue')
}

// 在 Vue Router 中添加新路由
router.addRoute(newRoute)

6.路由导航守卫

在 Vue Router 中，一共有三种类型的导航守卫：
1.全局前置守卫（beforeEach）：在路由切换之前调用，可以用来进行全局权限验证等操作。
2.全局解析守卫（beforeResolve）：在路由被解析之后，组件被激活之前调用，可以用来做一些全局的前置操作。
3.全局后置守卫（afterEach）：在路由切换完成之后调用，可以用来执行一些后续操作，如页面统计等。

router.beforeEach((to, from, next) => {
  // 在这里进行权限验证等操作
  if (判断) {
    next('/login')
  } else {
    next()
  }
})