Whyn
Whyn

Vue Router 4.x

思维导图

简介

Vue Router 是 Vue 官方指定路由，其赋能 Vue 实现 单页应用（SPA，Single Page Application） 前端路由功能。

本文主要介绍下 Vue Router 4.x 的相关使用方法。

基本使用

下面通过一个小例子驱动阐述如何在 Vue3 下使用 Vue Router 4.x。

例子：假设当前页面有两个标签：/home和/me，要求点击不同的标签分别显示不同的组件页面。

思路：使用 Vue Router 配置相关路由，点击标签时，跳转到对应路由视图。具体操作步骤如下：

  1. 创建项目：首先创建一个示例项目：

    # 此处使用 vite 进行构建
$ npm init vite@latest vue3_demos --template vue

$ cd vue3_demos

# 安装相关依赖
$ npm install

# 启动应用
$ npm run dev

    注：Vue3 安装更多方法，可参考：Vue3 安装

  2. 依赖引入：导入 Vue Router 依赖库：

    $ npm install vue-router@4

  3. 创建组件：分别创键Home.vue和Me.vue两个组件：

  4. 创建并配置路由对象：新建router/index.js，在此创建并配置路由对象：

    // file: router/index.js
// 导入相关路由组件对象
import Home from '../components/Home.vue';
import Me from '../components/Me.vue';

// 定义路由映射：路由映射到具体组件
const routes = [
  // 根路径 / 重定向到 /home
  {
    path: '/',
    redirect: '/home',
  },
  // 前端路由 /home 对应组件 Home
  {
    path: '/home',
    component: Home,
  },
  // 前端路由 /me 对应组件 Me
  {
    path: '/me',
    component: Me,
  },
];

// 导入相关函数
import { createRouter, createWebHashHistory } from 'vue-router';

// 创建路由实例（`router`）并传递路由映射配置（`route`）
const router = createRouter({
  // 配置导航模式，此处采用 hash 模式
  history: createWebHashHistory(),
  routes,
});

// 导出 router 实例
export default router;

  5. 装载 Router 实例：创建全局Vue实例，并装载已配置的 Vue Router 实例：

    // file: main.js

import { createApp } from 'vue';
import App from './App.vue';

import router from './router/index.js';

const app = createApp(App);
// 装载 Vue Router 实例，确保整个 Vue 应用全局支持路由
app.use(router);
app.mount('#app');

  6. 主页面配置路由导航：主页面通过可配置路由导航，匹配的组件会最终被渲染到中：

以上，就是一个简单的路由导航示例，其效果如下所示：


简单路由示例

功能介绍

下面会对 Vue Router 4.x 提供的一些常见功能进行简介。

路由对象

Vue Router 中存在两个最主要的路由对象为：

  1. Router：表示 Vue Router 实例对象。

    在 Vue Router 4.x 中，使用的是createRouter()函数创建Router实例：

    import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [...];

// 创建路由实例（`router`）并传递路由映射配置（`route`）
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

    Router主要是提供了对历史记录栈的操作功能，比如Router#push方法可以往历史堆栈中推入一个新的 URL，Router#replace方法可用于替换当前的 URL，还有Router#forward、Router#back、Router#go...

    注：当代码中调用createApp().use(Router)时，其实就向 Vue 实例全局中注入了一个Router实例，代码中获取该Router实例的方法有如下几种：

    1. Options API：选项式 API 可通过this.$routers获取全局路由实例
    2. Composition API：组合式 API 可通过函数useRouter()获取全局路由实例
    3. template：模板中可通过$router获取全局路由实例

    注：创建Router时，可设置一个激活样式linkActiveClass，这样在主页选中时，对应标签就会被添加上自定义激活样式：

    // file: router/index.js
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  // 设置标签激活时，添加样式类为 activeLink
  linkActiveClass: 'activeLink',
});

  2. RouteLocationNormalized：表示当前路由记录实例。

    routes中配置的每条路由映射，我们称之为「路由记录」，其类型就是RouteLocationNormalized：

    const routes = [
  { path: '/home', component: () => import('@/components/Home.vue'), },
  { path: '/me', component: Me, },
  { path: '/user/:id*', component: () => import('@/components/User.vue'), },
];

    当在主页上点击选中相应路由标签时，就会跳转到相应路由映射组件，此时可以通过Router#currentRoute得到当前路由记录。比如，点击跳转到/user时，Router#currentRoute就可以获取/user路由相关配置信息。

    其实还有其他更方便的方法获取到当前路由地址实例，主要包含如下：

    1. Options API：对于选项式 API，可通过this.$route获取当前路由地址实例
    2. Composition API：对于组合式 API，可通过useRoute()函数获取当前路由地址实例
    3. template：模板中可通过$route获取当前路由地址实例

    RouteLocationNormalized提供了丰富的路由配置选项，这里列举一些比较常用的：

    • hash：string类型，表示当前路由hash部分。总是以#开头，如果 URL 中没有hash，则为空字符串。

    • path：string类型，表示当前路由路径，形如/user/1

    • fullpath：string类型，表示当前路由完整路径，包含path、query和hash部分，

    • name：类型为RouteRecordName | null | undefined，表示当前路由名称。

      注：建议为每个路由对象命名，方便后续编程导航。名称命名需唯一。

      const routes = [
  {
    name: 'user', // 路由命名
    path: '/user/:id',
    component: () => import('@/components/User.vue'),
  },
];

    • redirectedFrom：类型为RouteLocation | undefined，表示触发重定向的路由地址。

    • params：类型为RouteParams，用于获取路径参数。比如对于/user/:id，$route.params获取到的就是id对应的信息。

    • query：类型为LocationQuery，表示 URL 查询参数。形如/user?id=1，则query对应的就是{id: 1}

    • meta：类型为RouteMeta，表示对当前路由的元数据，即额外信息描述。

      const routes = [
  {
    meta: { name: 'Whyn' },  // 路由元数据
    path: '/user/:id',
    component: () => import('@/components/User.vue'),
  },
];

历史记录模式

前端路由的改变，其核心是不会向服务器发出请求，Vue Router 提供了两种模式支持该功能：

  • Hash 模式：Hash 模式 URL 构成中带有一个哈希字符#，更改#字符后面的路径不会发送请求给服务器，其底层是基于浏览器的windows.onhashchange事件。

    Hash 模式的优点是编程简单，缺点是路径不够简洁（多了额外字符#），且对 SEO 不够友好。

    Vue Router 中通过createWebHashHistory()函数配置 Hash 模式：

    import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

  • History 模式：History 模式利用了 HTML5 History Interface 中新增的pushState()和replaceState()等方法，实现了浏览器的历史记录栈。调用这些方法修改 URL 历史记录时，不会触发浏览器向后端发送请求。

    History 模式的优点是路径简洁且控制更灵活，缺点是 History 模式下，用户在浏览器中直接访问或手动刷新时，会触发真正的请求，服务器没有当前请求资源时，会返回一个404错误。解决的方法也很简单，就是后端添加一个回退路由，在 URL 匹配不到任何静态资源时，默认返回前端页面的index.html。比如，Nginx 中可以配置如下：

    location / {
  try_files $uri $uri/ /index.html;
}

    Vue Router 中通过createWebHistory()函数配置启动 History 模式：

    import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

最后，Vue Router 更推荐使用 History 模式。

路由懒加载

前端每个路由都会对应一个组件，前面我们使用的方式都是导入相应组件，然后配置映射到对应路由中：

const Home = { template: '
Home
' }
const routes = [
  { path: '/', component: Home },
]

当路由比较多时，会导致加载的组件也变多，这样在应用打包后，生成的 JavaScript 包会臃肿变大，影响页面加载效率。

因此，Vue Router 提供了 路由懒加载 功能，其将不同路由对应的组件分割成不同的代码块，然后当路由被访问时，才动态加载对应组件，这样效率就会更高。

Vue Router 支持开箱即用的动态导入，如下所示：

// 直接加载
import Home from '@/components/Home.vue';
// 懒加载
const Me = () => import('@/components/Me.vue')

const routes = [
  { path: '/home', component: Home, }, // 直接加载
  { path: '/me', component: Me },      // 懒加载
];

注：上述代码使用@代表src目录，使能需要进行如下配置：

// file: vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

const path = require('path');
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 别名配置
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

此时如果执行构建：

$ npm run build
dist/index.html                  0.48 KiB
dist/assets/index.4ada91f0.js    2.13 KiB / gzip: 1.13 KiB
dist/assets/Me.a2557100.js       0.23 KiB / gzip: 0.20 KiB # Me.vue
dist/assets/index.d8be49df.css   0.12 KiB / gzip: 0.12 KiB
dist/assets/Me.0aae35d5.css      0.04 KiB / gzip: 0.06 KiB # Me.vue
dist/assets/vendor.fd7d0278.js   71.78 KiB / gzip: 28.44 KiB

可以看到，配置懒加载组件Me.vue会被单独打包到一个.js文件中。

实际上，Vue Router 中，懒加载基本原理是：component或components配置接收的是一个返回Promise组件的函数，因此，我们也可以进行自定义动态导入，其实就是创建一个返回Promise的函数，该Promise返回一个组件，比如：

const UserDetails = () =>
  Promise.resolve({
    /* 组件定义 */
  })

动态路由

一个很常见的场景，比如，根据用户id获取用户信息，通常对应的 RESTFul API 为/user/{id}，即匹配/user/1、/user/2...

Vue Router 将这种形式的 URL 称之为 动态路由，其使用:进行使能，形式如下所示：

const User = {
  template: '
User
',
}

// 这些都会传递给 `createRouter`
const routes = [
  // 动态段以冒号开始
  { path: '/user/:id', component: User },
]

此时，上述path可以匹配/user/1、/user/username等等。

动态路由也支持正则匹配，可以设置更加精细匹配规则，常见匹配设置如下：

const routes = [
  // /:id -> 仅匹配数字
  { path: '/:id(\\d+)' },

  // /:username -> 匹配其他任何内容
  { path: '/:username' },

  // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
  { path: '/:chapters+' },

  // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
  { path: '/:chapters*' },

  // 匹配 /users 和 /users/posva
  { path: '/users/:userId?' },

  // 匹配 /, /1, /1/2, 等
  { path: '/:chapters(\\d+)*' },
]

动态路由信息可以通过$route.params进行获取，一个示例代码如下：
配置路径/user/:id(\d+)映射到组件User.vue，并展示id具体值：






// file: router/index.js
const routes = [
  {
    path: '/user/:id(\\d+)',
    component: () => import('@/components/User.vue'),
  },
];

注：动态路由如果使用可变参数进行修饰，则：

  • /user/:id*：*表示匹配 0 个或多个，此时的$params.id为数组形式，即{id: []}
  • /user/:id+：+表示匹配 1 个或多个，此时的$params.id为数组形式，即{id: []}
  • /user/:id?：?表示匹配 0 个或 1 个，此时的$params.id为值，即{id: 10}

注：由于动态路由实际上映射的是同一个组件，因此，在进行动态路由切换时，会复用该组件实例，所以组件生命周期钩子不会被调用，如果想监听动态路由改变，需要手动watch当前路由this.$route.params上对应的属性，或者使用导航守卫钩子函数，比如onBeforeRouteUpdate进行监听。

嵌套路由

  • 嵌套路由：就是一个路由内部可以嵌套一些子路由。

比如，/user是一个路由，/user/one、/user/two是/user下的两个子路由，所以/user是一个嵌套了/user/one、/user/two的嵌套路由。

再简单进行理解，一个路由对应一个组件，因此，嵌套路由其实就是一个父组件内部包含了多个子组件，且这些子组件也是通过路由进行访问。

嵌套路由的配置很简单，只需为父路由设置children属性即可，下面以一个例子进行驱动，阐述嵌套路由。

示例：假设现在有一个新闻版块，该版块内部含有两个子版块，分别为财经版块和体育版块，用代码进行实现。

分析：父路由对应组件news.vue，其内嵌套两个子路由/news/finance和/news/sports，分别对应两个组件Finance.vue和Sports.vue。

嵌套路由搭建步骤如下：

  1. 首先创建所有对应组件：

    News.vue由于是父组件，因此其内部包含router-view标签用于展示嵌套子路由页面组件。

  2. 配置路由信息：

    // file: ./router/nested.js
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/news',
    component: () => import('@/components/nested_router/News.vue'),
    // 配置嵌套路由
    children: [
      {
        // /news 重定向到 /news/finance
        path: '/news',
        redirect: '/news/finance',
      },
      {
        // /news/finace
        path: 'finance',
        component: () => import('@/components/nested_router/Finance.vue'),
      },
      {
        // /news/sports
        path: 'sports',
        component: () => import('@/components/nested_router/Sports.vue'),
      },
    ],
  },
];

export default createRouter({
  // 使用 History 模式
  history: createWebHistory(),
  routes,
});

  3. 主页面添加展示/news映射的组件New.vue：

    // file: main.js
import { createApp } from 'vue';
import App from './App.vue';

import router from './router/nested.js';

const app = createApp(App);
app.use(router);
app.mount('#app');

编程式导航

前面我们都是通过标签实现导航链接功能，实际上当我们点击时，其内部会调用Router#push方法实现真正的路由导航，因此，我们也可以直接通过编程方式，即调用Router相关方式，手动实现导航跳转。

Vue Router 主要提供了以下几个方法供我们实现路由跳转：

  • Router#push：该方法会向历史堆栈添加一个新记录，可供我们导航到指定的 URL。

    Router#push是底层默认调用的导航方法：

    声明式 编程式
    router.push(...)

    Router#push支持多种参数类型，其常见调用方式如下所示：

    // 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

    注：中的to属性与Router#push方法接收的参数类型一致，所以上述配置也适用于to属性。

    注：如果同时提供了path和params，则params会被忽略。建议使用name属性替换path，避免潜在问题：

    router.push({ name: 'Me' });

  • Router#replace：该方法同样支持路由导航，但是与Router#push不同的是，该方法不会向历史堆栈中添加导航记录，而是直接替换当前导航记录。
    一般只有当明确禁止跳转回前一个路由时，才会使用该方法。

    可通过添加replace属性，使能Router#replace：

    声明式 编程式
    router.replace(...)

    Router#push也可以实现replace功能，只需为路由添加replace: true属性：

    router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

  • Router#go：该方法可以横跨跳转历史堆栈：

    // 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

下面还是通过一个示例驱动进行讲解。

例子：比如主页有两个按钮，要求点击两个按钮显示Home.vue和Me.vue两个页面。

思路：/home路由映射组件Home.vue，/me路由映射组件Me.vue，然后为按钮添加点击事件，通过调用Router相关方式实现路由跳转。
具体步骤如下：

  1. 创建路由页面Home.vue和Me.vue。内容参考上文

  2. 配置路由信息：

    // file: router/index.js
import { createRouter, createWebHistory } from 'vue-router';

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'Home',
      path: '/home',
      component: () => import('@/components/Home.vue'),
    },
    {
      name: 'Me',
      path: '/me',
      component: () => import('@/components/Me.vue'),
    },
  ],
});

  3. 加载 Vue Router 并配置主页面：

    // file: main.js
import { createApp } from 'vue';
import App from './App.vue';

import router from './router/index.js';

const app = createApp(App);
// 装载 Vue Router 实例，确保整个 Vue 应用全局支持路由
app.use(router);
app.mount('#app');

运行结果如下图所示：


programmatic_navigation_demo

命名路由

前面很多处都提到了 命名路由，其实就是为路由配置一个name属性：

const routes = [
  {
    name: 'user', # 命名路由
    path: '/user/:username',
    component: User
  }
]

使用命名路由，除了避免了手动硬编码 URL 外，最大的好处就是它会对params属性自动进行编码/解码。

具体使用命名路由时，只需为的to属性指定一个命名对象即可：

 User

命名视图

一个只能显示一个组件页面，即使是嵌套路由，同一时刻也只是显示一个组件页面。但是如果一个路由需要同时显示两个及以上组件页面，此时就需要同时提供多个，并且为设置相应名称，路由配置时会指定相应组件显示到对应名称的上，这种具备名称的的称之为 命名视图。

只需为设置name属性，即为 命名视图：

注：实际上，所有的都是命名视图，未配置name属性时，其默认名为default。

举个例子：比如现在主页上有两个组件页面：导航栏sidebar和主区域main，同时呈现在主页上，要求使用命名视图完成。

思路：主页需要配置两个命名视图的，然后路由配置时，指定相应组件显示到对应的命名视图上即可。
具体步骤如下：

  1. 创建导航栏组件和主区域组件：

  2. 配置路由信息：根路由需要配置两个子组件，并指定各自要显示到的命名视图：

    // file: router/index.js
import { createRouter, createWebHistory } from 'vue-router';

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      // 主页面同时显示多个路由映射组件
      components: {
        // Main.vue 显示到 default 视图上
        default: () => import('@/components/named_view/Main.vue'),
        // SideBar.vue 显示到 sidebar 视图上
        sidebar: () => import('@/components/named_view/SideBar.vue'),
      },
    },
  ],
});

  3. 主页配置两个命名视图，分别渲染对应的组件：

    // file: main.js 参考上文

效果如下：


Named View Demo

重定向

  • 重定向：就是当访问一个路由时，会被拦截并重新导航到另一个路由中。

重定向只需通过配置$route即可，Vue Router 大致提供如下几种类型重定向配置：

  • path：直接配置重定向路径：

    // 将 /home 重定向到 /
const routes = [{ path: '/home', redirect: '/' }]

  • 命名路由：命名路由本质是一个路由，因此也可直接命名路由，最终重定向到该命名路由对应的path：

    // 将 /home 重定向到命名路由 homepage 
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

  • 函数：可以将redirect设置会一个函数，动态返回重定向地址信息：

    const routes = [
  {
    path: '/a',
    redirect: (to) => {
      // 参数 to 是源路由地址实例对象
      const { hash, params, query } = to;
      if (query.to === 'search') {
        // 返回一个路由映射配置信息
        return { path: '/search', query: { q: params.searchText }};
      }
      if (params.id) {
        // 返回动态路由
        return '/with-params/:id';
      } else {
        // 返回路由地址
        return '/bar';
      }
    },
  },
];

别名

  • 别名：Vue Router 中，别名 指的是一个路由对应两个路径，即访问这两个路径都能跳转到该路由。

比如对于下面的配置：

const routes = [
  {
    path: '/user_one', // 路径
    alias: '/user_1',  // 别名
    component: User,
  },
];

其实就是为/user_one设置了一个别名/user_1，此时访问/user_one或/user_1都可以导航到User.vue组件。

注：如果想同时指定多个别名，则需进行如下配置：

const routes = [
  {
    path: '/user_one', 
    component: User,
    alias: ['/user_1', '/user_yi'], // 使用数组即可
  },
];

路由组件传参

  • 路由组件传参：其实就是跳转时，给路由映射组件传递参数。

前面内容，在模板中，我们都是通过$route直接获取路由信息：




// file: router/index.js
const routes = [
  {
    path: '/user/:name',
    component: () => import('@/components/User.vue'),
  },
];

这种做法其实紧耦合了路由与组件，对组件复用性产生消极影响。

一个更灵活的解决办法是通过为组件动态传递参数，Vue Router 大致提供了如下几种路由参数传递方法：

  • 布尔模式：为路由地址映射配置一个props: true，此时route.params会被传递给组件的props：

    比如，上面的例子使用参数传递，可修改为如下：

    // file: router/index.js
const routes = [
  {
    path: '/user/:name',
    component: () => import('@/components/User.vue'),
    props: true, // 使能路由参数传递
  },
];

  • 命名视图：对于有命名视图的路由，必须显示为每个命名视图定义props配置：

    const routes = [
  {
    path: '/user/:name',
    components: { default: User, sidebar: Sidebar },
    // default 视图使能参数传递，sidebar 视图关闭参数传递
    props: { default: true, sidebar: false }
  }
]

  • 对象模式：将props设置为对象，直接传递该对象给组件：

    const routes = [
  {
    path: '/user/:name',
    components: { default: User, sidebar: Sidebar },
    // 直接传递对象
    props: { name: 'Whyn' }
  }
]

    注：对象模式此时直接传递props对象，与路由params没有关系。当我们需要传递静态内容给到路由组件时，对象模式就很合适。

  • 函数模式：可以将props设置为一个函数，该函数参数是路由地址信息$route，因此可以在函数内部提取当前路由相关信息，结合自己一些静态内容，组合进行设置，更加灵活：

    const routes = [
  {
    path: '/user',
    component: () => import('@/components/User.vue'),
    props: (route) => ({ query: route.query.name }),
  },
];

    上述配置中，比如此时我们跳转到/user?name=Whyn时，则会传递{ query: 'Whyn' }给到User.vue组件：

导航守卫

  • 导航守卫：所谓 导航守卫，其实就是一些路由钩子，在进行路由跳转或取消时，会触发相应钩子，我们可以在这些钩子中，检测路由跳转及获取相关数据，植入我们自己的操作。

Vue Router 总共提供了如下三种类型导航守卫：

  • 全局守卫：可以监控所有路由跳转的导航守卫。具体可在细分为如下三种类型：

    1. 全局前置守卫：当触发一个导航跳转时，全局前置守卫会被触发调用（多个全局前置守卫会按照创建顺序依次回调）。

      可通过Router#beforeEach注册一个全局前置守卫：

      const router = createRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

      全局前置守卫是异步解析执行的，即回调函数与async和Promise工作方式一样：

      // 上述代码相当于如下
router.beforeEach(async (to, from, next) => {
  // canUserAccess() 返回 `true` 或 `false`
  return await canUserAccess(to)
})

      全局前置守卫每个守卫方法可接受三个参数：

      • to：表示即将要进入的路由目标
      • from：当前导航正要离开的路由对象
      • next：可选参数，用于触发并传递额外数据给下一个路由对象：
      router.beforeEach((to, from, next) => {
    // 进行管道的下一个钩子
    next(); 

    // 中断当前导航，URL 重置为 from 路由路径
    next(false);

    // 跳转到指定路由 /home
    next('/home');

    // 同 next('/home')
    next( {path: '/home'} );

    // 如果 next 参数是一个 Error 实例，则导航会被终止，
    // 且参数 error 会被传递给 Router#onError() 回调
    next(error);
})

      全局前置守卫每个守卫方法返回值有如下几种可选：

      • true|undefined：返回true或undefined，表示导航有效，并自动调用下一个导航守卫：

        router.beforeEach((to, from) => {
    // 没有 return，则表示 return undefined
    return false;
});

        注：如果显示声明了第三个参数next，则必须手动调用next进行跳转：

        router.beforeEach((to, from, next) => {
    // false
    next(true);
    // 或者 undefined
    next();
});

      • false：表示取消导航跳转，即当前 URL 重置到from路由地址

        router.beforeEach((to, from) => {
    // 取消导航，停留在 from 路由页面
    return false;
});

      • 一个路由地址：指定导航跳转地址，相当于调用了Router#push：

        const routes = [
  // ...
  { path: '/user', component: () => import('@/components/User.vue') },
],

router.beforeEach((to, from) => {
  if (to.path === '/user') {
      return true;
    return '/user';
});

      • Error：抛出异常，此时会取消导航并回调Router#onError全局错误钩子：

        router.beforeEach((to, from, next) => {
  // 手动抛异常，会被 onError 捕获到
  throw 'error occured!!';
});

router.onError((error, to, from) => {
  console.log(error, to, from);
});

    2. 全局解析守卫：全局解析守卫与全局前置守卫类似，都是在 每次导航 时都会被触发，但是全局解析守卫会确保在 所有组件内守卫和异步路由组件被解析后，才会被正确调用。

      可通过Router#beforeResolve方法注册一个全局解析守卫：

      router.beforeResolve((to, from, next) => {
  console.log('Router beforeResolve');
});

      Router#beforeResolve是获取数据或执行任何其他操作（如果用户无法进入页面时你希望避免执行的操作）的理想位置。

    3. 全局后置钩子：全局后置钩子是在导航被确认后，才进行调用，因此，该钩子不会携带next函数，也不会改变导航状态。

      可通过Router#afterEach注册一个全局后置钩子：

      router.afterEach((to, from, failure) => {
  console.log('Router afterEach');
});

      Router#afterEach对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。

  • 路由独享守卫：如果只关注特定路由导航跳转事件，那么只需为相应路由添加导航守卫即可。

    只需在路由配置上定义beforeEnter函数即可注册一个路由独享导航守卫：

    const routes = [
  {
    path: '/home',
    component: () => import('@/components/Home.vue'),
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      console.log('Home: Route beforeEnter');
      next();
    },
    // 支持传递多个钩子函数
    // beforeEnter: [(..)=>{..}, (..)=>{..}],
  },
];

    beforeEnter只在进入路由时触发，更改params、query或hash时，不会触发beforeEnter。

  • 组件内守卫：一个路由最终映射为一个组件，因此我们也可以在组件内定义导航守卫，捕获路由跳转导航相关信息。

    组件内守卫在 Options API 中可通过为组件添加beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave函数进行注册：

    const UserDetails = {
  template: `...`,
  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },
}

    组件内守卫在 Composition API 中可通过在setup函数中定义onBeforeRouteUpdate和onBeforeRouteLeave分别注册 update 和 leave 守卫：

    Composition API 中，setup等于beforeRouteEnter，在路由进入时被触发；onBeforeRouteUpdate在第一次路由进入时，不会被触发，只有在该路由重复进入，组件被复用时才会被触发（比如params的改变）；onBeforeRouteLeave在离开当前路由时会被触发。

最后，全局导航守卫、路由独享守卫和组件内守卫完整的导航解析流程如下图所示：

注：流程图来源于网上，侵删。

路由导航完整解析流程

附录

  • 本篇博文 Demo 源码可查看：vue-router4.x-demo

参考

  • 官网文档
  • 可能比文档还详细--VueRouter完全指北

你可能感兴趣的:(Vue Router 4.x)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • vue3中el-table中点击图片放大时，被表格覆盖 叫我小鹏呀 vue.jsjavascript前端
    问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
  • vue项目element-ui的table表格单元格合并 酋长哈哈 vue.jselementuijavascript前端
    一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
  • Vue中table合并单元格用法 weixin_30613343 javascriptViewUI
    地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • vue + Element UI table动态合并单元格 我家媳妇儿萌哒哒 elementUIvue.js前端javascript
    一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 计算机毕业设计PHP仓储综合管理系统（源码+程序+VUE+lw+部署） java毕设程序源码王哥 php课程设计vue.js
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置：phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术：原生PHP++Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是小皮phpstudy最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • vue render 函数详解 (配参数详解) 你的眼睛會笑 vue2vue.jsjavascript前端
    vuerender函数详解(配参数详解)在Vue3中，`render`函数被用来代替Vue2中的模板语法。它接收一个h函数（或者是`createElement`函数的别名），并且返回一个虚拟DOM。render函数的语法结构如下：render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中，我们使用h函数创建了一个div元素
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • golang 实现文件上传下载 wangwei830 go
    Gin框架上传下载上传（支持批量上传）httpRouter.POST("/upload",func(ctx*gin.Context){forms,err:=ctx.MultipartForm()iferr!=nil{fmt.Println("error",err)}files:=forms.File["fileName"]for_,v:=rangefiles{iferr:=ctx.SaveUplo
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js前端javascriptnode.jsnpm
    node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
  • vue2实现复制,粘贴功能 周bro vue.jsjavascript前端
    一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
  • 【vite 自动配置路由】 CODER-V 前端javascriptvue.js前端软件构建
    手动配置路由，是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置，我们就需要遵循以下目录规则：每一个页面对应一个包，当前包下的主页面命名为index.vue；每个包里必须配置一个page.js；在每一个page.js里边配置，额外的路由信息，比如：exportdefault{title:'商品',men
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Vue3 vant组件库自动导入 不叫虎子 Vuevue.js前端javascript前端框架typescript
    实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
  • vant-element-ts一起使用存在的问题 flynn_ 问题总结vue
    由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台 网顺技术团队 成品程序项目javavue.js汽车课程设计springboot
    基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • C# 开发教程-入门基础 天马3798 教程系列整理c#开发语言
    1.C#简介、环境，程序结构2.C#基本语法，变量，控制局域，数据类型，类型转换3.C#数组、循环，Linq4.C#类，封装，方法5.C#枚举、字符串6.C#面相对象，继承，封装，多态7.C#特性、属性、反射、索引器8.C#委托，事件，集合，泛型9.C#匿名方法10.C#多线程更多：JQuery开发教程入门基础Vue开发基础入门教程Vue开发高级学习教程
  • 若依后端正常启动但是uniapp移动端提示后端接口异常 大可大可抖 uni-app
    pc端能用模拟器也能正常连接接口，手机端真机调试连不上接口解决：1.先看config.js的填自己的ip地址module.exports={//baseUrl:'https://vue.ruoyi.vip/prod-api',baseUrl:"http://192.168.101.5:8080",}2.网络环境问题（防火墙）点击属性然后选择专用
  • 好看的vue登录页面(附 源代码 背景图) 小小薛定谔 vue.jsjavascriptcss前端
    一、效果展示二、代码你好!欢迎回来登录忘记密码?注册exportdefault{name:"MedLogin",data(){return{confirm_disabled:false,loginForm:{no:'',password:''},rules:{no:[{required:true,message:'请输入账号',trigger:'blur'},{min:3,max:6,messag
  • sql统计相同项个数并按名次显示 朱辉辉33 javaoracle
    现在有如下这样一个表： A表 ID Name time ------------------------------ 0001 aaa 2006-11-18 0002 ccc 2006-11-18 0003 eee 2006-11-18 0004 aaa 2006-11-18 0005 eee 2006-11-18 0004 aaa 2006-11-18 0002 ccc 20
  • Android+Jquery Mobile学习系列-目录 白糖_ JQuery Mobile
    最近在研究学习基于Android的移动应用开发，准备给家里人做一个应用程序用用。向公司手机移动团队咨询了下，觉得使用Android的WebView上手最快，因为WebView等于是一个内置浏览器，可以基于html页面开发，不用去学习Android自带的七七八八的控件。然后加上Jquery mobile的样式渲染和事件等，就能非常方便的做动态应用了。   从现在起，往后一段时间，我打算
  • 如何给线程池命名 daysinsun 线程池
            在系统运行后，在线程快照里总是看到线程池的名字为pool-xx，这样导致很不好定位，怎么给线程池一个有意义的名字呢。参照ThreadPoolExecutor类的ThreadFactory，自己实现ThreadFactory接口，重写newThread方法即可。参考代码如下：     public class Named
  • IE 中"HTML Parsing Error:Unable to modify the parent container element before the 周凡杨 html解析errorreadyState
      错误： IE 中"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"     现象： 同事之间几个IE 测试情况下，有的报这个错，有的不报。经查询资料后，可归纳以下原因。
  • java上传 g21121 java
    我们在做web项目中通常会遇到上传文件的情况，用struts等框架的会直接用的自带的标签和组件，今天说的是利用servlet来完成上传。 我们这里利用到commons-fileupload组件，相关jar包可以取apache官网下载：http://commons.apache.org/ 下面是servlet的代码： //定义一个磁盘文件工厂 DiskFileItemFactory fact
  • SpringMVC配置学习 510888780 springmvc
    spring MVC配置详解 现在主流的Web MVC框架除了Struts这个主力 外，其次就是Spring MVC了，因此这也是作为一名程序员需要掌握的主流框架，框架选择多了，应对多变的需求和业务时，可实行的方案自然就多了。不过要想灵活运用Spring MVC来应对大多数的Web开发，就必须要掌握它的配置及原理。 　　一、Spring MVC环境搭建：（Spring 2.5.6 + Hi
  • spring mvc-jfreeChart 柱图(1) 布衣凌宇 jfreechart
    第一步：下载jfreeChart包，注意是jfreeChart文件lib目录下的，jcommon-1.0.23.jar和jfreechart-1.0.19.jar两个包即可； 第二步：配置web.xml; web.xml代码如下 <servlet>     <servlet-name>jfreechart</servlet-nam
  • 我的spring学习笔记13-容器扩展点之PropertyPlaceholderConfigurer aijuans Spring3
    PropertyPlaceholderConfigurer是个bean工厂后置处理器的实现，也就是BeanFactoryPostProcessor接口的一个实现。关于BeanFactoryPostProcessor和BeanPostProcessor类似。我会在其他地方介绍。PropertyPlaceholderConfigurer可以将上下文（配置文件）中的属性值放在另一个单独的标准java P
  • java 线程池使用 Runnable&Callable&Future antlove javathreadRunnablecallablefuture
    1. 创建线程池 ExecutorService executorService = Executors.newCachedThreadPool();   2. 执行一次线程，调用Runnable接口实现 Future<?> future = executorService.submit(new DefaultRunnable()); System.out.prin
  • XML语法元素结构的总结 百合不是茶 xml树结构
    1.XML介绍1969年   gml (主要目的是要在不同的机器进行通信的数据规范)1985年   sgml  standard generralized markup language1993年   html(www网)1998年  xml   extensible markup language
  • 改变eclipse编码格式 bijian1013 eclipse编码格式
    1.改变整个工作空间的编码格式         改变整个工作空间的编码格式，这样以后新建的文件也是新设置的编码格式。         Eclipse->window->preferences->General->workspace-
  • javascript中return的设计缺陷 bijian1013 JavaScriptAngularJS
    代码1： <script> var gisService = (function(window) { return { name:function () { alert(1); } }; })(this); gisService.name(); &l
  • 【持久化框架MyBatis3八】Spring集成MyBatis3 bit1129 Mybatis3
    pom.xml配置 Maven的pom中主要包括： MyBatis MyBatis-Spring Spring MySQL-Connector-Java Druid applicationContext.xml配置   <?xml version="1.0" encoding="UTF-8"?> &
  • java web项目启动时自动加载自定义properties文件 bitray javaWeb监听器相对路径
    创建一个类 public class ContextInitListener implements ServletContextListener 使得该类成为一个监听器。用于监听整个容器生命周期的，主要是初始化和销毁的。 类创建后要在web.xml配置文件中增加一个简单的监听器配置，即刚才我们定义的类。 <listener> <des
  • 用nginx区分文件大小做出不同响应 ronin47
    昨晚和前21v的同事聊天，说到我离职后一些技术上的更新。其中有个给某大客户(游戏下载类)的特殊需求设计，因为文件大小差距很大——估计是大版本和补丁的区别——又走的是同一个域名，而squid在响应比较大的文件时，尤其是初次下载的时候，性能比较差，所以拆成两组服务器，squid服务于较小的文件，通过pull方式从peer层获取，nginx服务于较大的文件，通过push方式由peer层分发同步。外部发布
  • java-67-扑克牌的顺子.从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的.2-10为数字本身，A为1，J为11，Q为12，K为13，而大 bylijinnan java
    package com.ljn.base; import java.util.Arrays; import java.util.Random; public class ContinuousPoker { /** * Q67 扑克牌的顺子 从扑克牌中随机抽5张牌，判断是不是一个顺子，即这5张牌是不是连续的。 * 2-10为数字本身，A为1，J为1
  • 翟鸿燊老师语录 ccii 翟鸿燊
    一、国学应用智慧TAT之亮剑精神A 1. 角色就是人格     就像你一回家的时候，你一进屋里面，你已经是儿子，是姑娘啦，给老爸老妈倒怀水吧，你还觉得你是老总呢？还拿派呢？就像今天一样，你们往这儿一坐，你们之间是什么，同学，是朋友。     还有下属最忌讳的就是领导向他询问情况的时候，什么我不知道，我不清楚，该你知道的你凭什么不知道
  • [光速与宇宙]进行光速飞行的一些问题 comsci 问题
         在人类整体进入宇宙时代，即将开展深空宇宙探索之前，我有几个猜想想告诉大家     仅仅是猜想。。。未经官方证实      1：要在宇宙中进行光速飞行，必须首先获得宇宙中的航行通行证，而这个航行通行证并不是我们平常认为的那种带钢印的证书，是什么呢？ 下面我来告诉
  • oracle undo解析 cwqcwqmax9 oracle
    oracle undo解析2012-09-24 09:02:01     我来说两句       作者：虫师收藏    我要投稿 Undo是干嘛用的？         &nb
  • java中各种集合的详细介绍 dashuaifu java集合
    一，java中各种集合的关系图 Collection       接口的接口     对象的集合  ├ List           子接口   &n
  • 卸载windows服务的方法 dcj3sjt126com windowsservice
    卸载Windows服务的方法 在Windows中，有一类程序称为服务，在操作系统内核加载完成后就开始加载。这里程序往往运行在操作系统的底层，因此资源占用比较大、执行效率比较高，比较有代表性的就是杀毒软件。但是一旦因为特殊原因不能正确卸载这些程序了，其加载在Windows内的服务就不容易删除了。即便是删除注册表中的相 应项目，虽然不启动了，但是系统中仍然存在此项服务，只是没有加载而已。如果安装其他
  • Warning: The Copy Bundle Resources build phase contains this target's Info.plist dcj3sjt126com iosxcode
        http://developer.apple.com/iphone/library/qa/qa2009/qa1649.html Excerpt: You are getting this warning because you probably added your Info.plist file to your Copy Bundle
  • 2014之C++学习笔记（一） Etwo C++EtwoEtwoiterator迭代器
            已经有很长一段时间没有写博客了，可能大家已经淡忘了Etwo这个人的存在，这一年多以来，本人从事了AS的相关开发工作，但最近一段时间，AS在天朝的没落，相信有很多码农也都清楚，现在的页游基本上达到饱和，手机上的游戏基本被unity3D与cocos占据，AS基本没有容身之处。so。。。最近我并不打算直接转型
  • js跨越获取数据问题记录 haifengwuch jsonpjsonAjax
    js的跨越问题，普通的ajax无法获取服务器返回的值。   第一种解决方案，通过getson，后台配合方式，实现。 Java后台代码： protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String ca
  • 蓝色jQuery导航条 ini JavaScripthtmljqueryWebhtml5
    效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/39.htmHTML文件代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery鼠标悬停上下滑动导航条 - 柯乐义<
  • linux部署jdk,tomcat,mysql kerryg jdktomcatlinuxmysql
    1、安装java环境jdk:     一般系统都会默认自带的JDK,但是不太好用，都会卸载了，然后重新安装。    1.1）、卸载：      （rpm -qa :查询已经安装哪些软件包；        rmp -q 软件包：查询指定包是否已
  • DOMContentLoaded VS onload VS onreadystatechange mutongwu jqueryjs
    1. DOMContentLoaded 在页面html、script、style加载完毕即可触发，无需等待所有资源（image/iframe）加载完毕。（IE9+） 2. onload是最早支持的事件，要求所有资源加载完毕触发。 3. onreadystatechange 开始在IE引入，后来其它浏览器也有一定的实现。涉及以下 document , applet, embed, fra
  • sql批量插入数据 qifeifei 批量插入
    hi，   自己在做工程的时候，遇到批量插入数据的数据修复场景。我的思路是在插入前准备一个临时表，临时表的整理就看当时的选择条件了，临时表就是要插入的数据集，最后再批量插入到数据库中。    WITH tempT AS ( SELECT item_id AS combo_id, item_id, now() AS create_date FROM a
  • log4j打印日志文件 如何实现相对路径到 项目工程下 thinkfreer Weblog4j应用服务器日志
    最近为了实现统计一个网站的访问量，记录用户的登录信息，以方便站长实时了解自己网站的访问情况，选择了Apache 的log4j,但是在选择相对路径那块 卡主了，X度了好多方法(其实大多都是一样的内用，还一个字都不差的)，都没有能解决问题，无奈搞了2天终于解决了，与大家分享一下 需求： 用户登录该网站时，把用户的登录名,ip,时间。统计到一个txt文档里，以方便其他系统调用此txt。项目名
  • linux下mysql-5.6.23.tar.gz安装与配置 笑我痴狂 mysqllinuxunix
    1.卸载系统默认的mysql [root@localhost ~]# rpm -qa | grep mysql mysql-libs-5.1.66-2.el6_3.x86_64 mysql-devel-5.1.66-2.el6_3.x86_64 mysql-5.1.66-2.el6_3.x86_64 [root@localhost ~]# rpm -e mysql-libs-5.1
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他