跳转路由

Vue

• child::

  页面交互跳转路由

  child::

  RouterLink

  实例

  <RouterLink to="/">Go to Home</RouterLink>

  指向原始笔记的链接

  指向原始笔记的链接

• child::

  js跳转路由

  • 通过路由实例进行调用push或replace
    • push和replace使用方式都一样，只不过replace不会改变history对象
  • child::

    跳转history

    This method takes a single integer as parameter that indicates by how many steps to go forward or go backward in the history stack, similar to window.history.go(n). Examples

    // go forward by one record, the same as router.forward()
    router.go(1)
    // go back by one record, the same as router.back()
    router.go(-1)
    // go forward by 3 records
    router.go(3)
    // fails silently if there aren't that many records
    router.go(-100)
    router.go(100)

    指向原始笔记的链接

  实例

  基础

  路由实例.push("/home")

  进阶

  // literal string path
  router.push('/users/eduardo')
  // object with path
  router.push({ path: '/users/eduardo' })
  // named route with params to let the router build the url
  router.push({ name: 'user', params: { username: 'eduardo' } })
  // with query, resulting in /register?plan=private
  router.push({ path: '/register', query: { plan: 'private' } })
  // with hash, resulting in /about#team
  router.push({ path: '/about', hash: '#team' })

  指向原始笔记的链接

• child::

  路由映射到另一个路由

  更改用户的URL

  child::

  重定向路由

  实例

  const routes = [{ path: '/home', redirect: '/' }]

  适用范围

  • 会修改用户原URL到目标URL

  指向原始笔记的链接

  不更改用户的URL

  child::路由别名

  指向原始笔记的链接

• child::

  路由鉴权

  梗概

  • 使用meta字段来指定需要鉴权。然后通过beforeEach[use::路由守卫]来检查用户的登录状态以及路由的鉴权要求

  示例

  以下是一个基本的路由鉴权实现示例：

  1. 首先，安装 Vue Router 库：

   npm install vue-router

  1. 在 Vue 应用中设置路由规则和导航守卫。假设我们有两个需要鉴权的路由：/dashboard 和 /profile。

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   ​
   Vue.use(VueRouter);
   ​
   const router = new VueRouter({
     routes: [
       {
         path: '/',
         redirect: '/dashboard',
       },
       {
         path: '/dashboard',
         component: Dashboard,
       },
       {
         path: '/profile',
         component: Profile,
         meta: { requiresAuth: true },
       },
     ],
   });
   ​
   // 添加导航守卫
   router.beforeEach((to, from, next) => {
     const isAuthenticated = true; // 假设这里有一个表示用户登录状态的变量
   ​
     // 如果路由需要鉴权
     if (to.meta.requiresAuth) {
       // 如果用户已登录，继续导航
       if (isAuthenticated) {
         next();
       } else {
         // 用户未登录，重定向到登录页面
         next('/');
       }
     } else {
       // 路由不需要鉴权，直接导航
       next();
     }
   });
   ​
   export default router;

  指向原始笔记的链接

推荐：

• child::使用name跳转指定路由