Vue —— 路由

人鱼望山荷

已于 2022-05-19 22:09:24 修改

阅读量663

点赞数

文章标签： vue.js npm javascript

于 2022-03-18 00:25:11 首次发布

本文链接：https://blog.csdn.net/weixin_54966486/article/details/123564333

版权

本文详细探讨了Vue.js中的路由应用，包括不同版本的vue-router安装、路由懒加载、编程式导航、参数传递（params和query）、多级路由、命名路由、路由props配置、路由缓存、激活与失活的生命周期以及路由守卫等核心概念，并提供了相关面试题以供复习。

摘要由CSDN通过智能技术生成

路由

下载 router 并使用：
- vue-router3 只能在 vue2 中使用 npm i vue-router@3
- vue-router4 只能在 vue3 中使用 npm i vue-router@4

$route	: 一般获取路由信息（路径、query、params）
$router	: 一般进行编程式导航进行路由跳转

(1)安装路由 与 创建路由组件
   components 文件夹：非路由组件
   pages || views 文件夹：路由组件  ==> src 下创建 pages文件夹
(2)配置路由 ==> src 下创建  router 文件夹, 创建文件 index.js 进行路由配置，然后在入口文件注册

router/index.js 路由懒加载

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)


/* Layout */
import Layout from '@/layout'

//解决编程导航方式路由跳转方式不可重复提交相同参数的问题 ==> 重写 push 和 replace 方法
//1.先把 VueRouter 原型对象的 push 保存一份
let originPush = Router.prototype.push;

//重写 push | replace
//第一个参数：跳转地址和参数
Router.prototype.push = function (location, resolve, reject) {
   
  if (resolve && reject) {
   
    originPush.call(this, location, resolve, reject);
  } else {
   
    originPush.call(this, location, () => {
    }, () => {
    });
  }
}


export const constantRoutes = [
  // 搜索商品路由
  {
   
    path: '/search',
    component: () => import('@/views/Search/index'),
    hidden: true
  }
  ,

  //注册路由
  {
   
    path: '/register',
    component: () &