vue3路由基本使用

在 Vue 3 中,路由指的是应用程序的导航系统,允许你在不同的视图或页面之间进行切换。通过 vue-router 插件,你可以定义路由规则,将 URL 路径映射到 Vue 组件,实现页面间的跳转和状态管理。使用路由,用户可以在应用中导航不同的视图,同时保持浏览器的历史记录。

一 路由的基本使用

1. 安装 vue-router

npm install vue-router@next

2. 创建路由配置

定义路由配置通常在一个单独的文件中完成,例如 router/index.js 或 router/index.ts。配置包括路径、组件和其他路由属性:

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 在应用中使用路由

在你的 Vue 应用中,通常会在 main.js 或 main.ts 中使用 router 实例:

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

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

4. 路由视图

使用 组件在你的模板中展示路由匹配的组件。这个组件充当路由占位符:

<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>
<template>
  <div>
    <router-view></router-view>
  </div>
  <RouterLink to="/home" active-class="active">首页</RouterLink>
</template>

5 命名路由

命名路由允许你为每个路由定义一个唯一的名称,方便在应用中引用和导航。定义命名路由时,你可以在路由配置中为每个路由指定一个 name 属性

  • 在路由配置中为每个路由指定 name 属性:
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: HomeComponent
  },
  {
    path: '/about',
    name: 'About',
    component: AboutComponent
  }
];

  • 使用 组件时,可以通过 :to 属性的对象形式来引用命名路由:
<router-link :to="{ name: 'Home' }">Home</router-link>
<router-link :to="{ name: 'About' }">About</router-link>
  • 编程式导航
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToHome() {
      router.push({ name: 'Home' });
    }

    return { goToHome };
  }
};
  • 带参数的命名路由

当路由需要参数时,可以在 :to 对象中添加 params 属性:

<router-link :to="{ name: 'UserProfile', params: { id: 123 } }">User Profile</router-link>

编程式导航时也可以传递参数:

router.push({ name: 'UserProfile', params: { id: 123 } });

6 嵌套路由

嵌套路由允许你在一个路由中定义子路由,从而构建层级结构的页面。这样可以在一个页面内展示多个视图或组件。

  • 定义嵌套路由

在路由配置中,将子路由定义在父路由的 children 属性下:

const routes = [
  {
    path: '/dashboard',
    component: DashboardLayout,
    children: [
      {
        path: '',
        name: 'DashboardHome',
        component: DashboardHome
      },
      {
        path: 'settings',
        name: 'DashboardSettings',
        component: DashboardSettings
      }
    ]
  }
];

7 路由重定向

路由重定向的作用是自动将用户从一个路径引导到另一个路径。它可以用于以下几种情况:

  • 默认路径:例如,将根路径 / 重定向到主页 /home。
{
    path:'/',
    redirect:'/about'
}
  • 旧路径更新:将旧的或过时的路径重定向到新的路径,以保持链接的有效性。
  • 权限控制:将用户重定向到登录页面,如果他们尝试访问受限区域而未登录。

二 路由的操作

1. 导入 useRouter 和 useRoute

在 Vue 3 中,你需要从 vue-router 导入 useRouter 和 useRoute,这两个函数提供了对路由实例和当前路由信息的访问。

import { useRouter, useRoute } from 'vue-router';

2. 进行路由导航

使用 useRouter 来执行路由导航操作。例如,你可以在组件中定义方法来进行导航:

export default {
  setup() {
    const router = useRouter();

    function goToHome() {
      router.push('/');
    }

    function goToUserProfile(userId) {
      router.push({ name: 'user-profile', params: { id: userId } });
    }

    return { goToHome, goToUserProfile };
  }
};

3. 访问当前路由信息

使用 useRoute 来访问当前路由的信息,如路径、查询参数和动态路由参数:

export default {
  setup() {
    const route = useRoute();

    console.log(route.path);  // 当前路由的路径
    console.log(route.params.id);  // 动态路由参数
    console.log(route.query.search);  // 查询参数

    return { route };
  }
};

4. 路由守卫

你可以在 setup 函数中使用 onBeforeRouteEnter 和 onBeforeRouteUpdate 进行路由守卫:

import { onBeforeRouteEnter, onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    onBeforeRouteEnter((to, from, next) => {
      // 在路由进入之前执行的逻辑
      if (/* 条件 */) {
        next();
      } else {
        next('/login');
      }
    });

    onBeforeRouteUpdate((to, from, next) => {
      // 在路由更新之前执行的逻辑
      if (/* 条件 */) {
        next();
      } else {
        next('/error');
      }
    });
  }
};

5. 使用路由钩子

你可以在 setup 函数中使用 Vue 的生命周期钩子来处理路由相关的逻辑:

import { onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    onMounted(() => {
      console.log('Current route path:', route.path);
      // 处理路由信息
    });

    return { route };
  }
};

6. 监听路由变化

使用 watch API 监听路由变化并响应:

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    watch(
      () => route.params.id,
      (newId, oldId) => {
        console.log(`Route parameter ID changed from ${oldId} to ${newId}`);
        // 执行需要根据路由变化更新的逻辑
      }
    );

    return { route };
  }
};

7. 路由懒加载

通过懒加载组件来提高应用的性能:

const UserProfile = () => import('../components/UserProfile.vue');

const routes = [
  {
    path: '/user/:id',
    name: 'user-profile',
    component: UserProfile
  }
];

8. 使用路由元信息

路由元信息可以用于存储额外的信息,例如权限检查:

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: { requiresAuth: true }
  }
];

// 在路由守卫中检查元信息
import { onBeforeRouteEnter } from 'vue-router';

export default {
  setup() {
    onBeforeRouteEnter((to, from, next) => {
      if (to.meta.requiresAuth && !isAuthenticated()) {
        next('/login');
      } else {
        next();
      }
    });
  }
};

三 路由的两种工作模式

1 history模式

  1. 工作原理

history模式利用 HTML5 的 History API (pushState, replaceState, 和 popState 事件) 来管理路由。浏览器的 URL 不包含 # 符号,而是直接显示路由的路径部分。需要对服务器进行配置,以确保所有路由请求都返回应用的入口 HTML 文件。

  1. 优点
  • 更清晰的 URL:没有 # 符号,URL 更加整洁和符合标准。
  • 支持更复杂的功能:支持浏览器的前进、后退功能,与传统的浏览器行为一致。
  1. 缺点
  • 需要服务器配置:必须配置服务器以处理路由,避免 404 错误。
  1. 示例
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

5 URL 示例

  • 首页:http://example.com/
  • 关于页:http://example.com/about

2 hash模式

  1. 工作原理

哈希模式使用 URL 的 # 符号后面的部分来表示路由状态。浏览器不会将 # 后面的部分发送到服务器,所有的路由切换都在客户端完成。

  1. 优点
  • 兼容性:几乎所有浏览器都支持哈希模式,且不需要额外的服务器配置。
  • 简单:无需配置服务器即可处理路由。
  1. 缺点
  • URL 显得不美观:URL 中包含 # 符号,这可能会影响用户体验和 SEO。
  • 某些功能限制:如部分工具或库可能对哈希 URL 的支持较差。
  1. 示例
import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

  1. URL 示例

首页:http://example.com/#/
关于页:http://example.com/#/about

四 路由传参

1 query参数

  • 定义路由

Query 参数不需要在路由定义中做特别设置:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Search from '@/components/Search.vue';

const routes = [
  {
    path: '/search',
    component: Search
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
  • 访问 Query 参数

在组件中,使用 useRoute 来访问查询参数:

<template>
  <div>
    <h1>Search Query: {{ query }}</h1>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const query = computed(() => route.query.q);

    return { query };
  }
}
</script>
  • 路由跳转

使用 useRouter 进行跳转并传递查询参数:

<template>
  <button @click="search('vue')">Search for Vue</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function search(query) {
      router.push({ path: '/search', query: { q: query } });
    }

    return { search };
  }
}
</script>

2 params参数

  • 定义路由

首先,设置带有路径参数的路由:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import User from '@/components/User.vue';

const routes = [
  {
    path: '/user/:id',
    component: User
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;
  • 访问 Path 参数

在组件中,使用 useRoute 来访问路径参数:

<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = computed(() => route.params.id);

    return { userId };
  }
}
</script>
  • 路由跳转

使用 useRouter 进行跳转并传递路径参数:

<template>
  <button @click="goToUser(123)">Go to User 123</button>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToUser(id) {
      router.push(`/user/${id}`);
    }

    return { goToUser };
  }
}
</script>
  • 总结

params参数 是在路由路径中定义的动态部分(如 /user/:id),在 URL 中直接显示,通常用于标识资源的唯一性。在组件中,通过 useRoute 访问 route.params 来获取这些参数。

query参数 是附加在 URL 末尾的键值对(如 /search?q=vue),用于传递额外的过滤或搜索条件。在组件中,通过 useRoute 访问 route.query 来获取这些参数。

Vue3中,使用路由跳转通常通过Vue Router库来实现。Vue Router是一个非常流行的前端路由库,它帮助我们将单页应用(SPA)的不同部分组织成可导航的视图。 以下是如何在Vue3项目中使用路由跳转的基本步骤: 1. **安装Vue Router**: 首先,在项目中安装Vue Router,可以通过npm或yarn进行安装: ```bash npm install vue-router # 或者 yarn add vue-router ``` 2. **配置`router.config.js`**: 在`src/router`目录下创建一个`index.js`文件,定义你的路由规则。例如: ```javascript import { createRouter, createWebHashHistory } from 'vue-router'; import Home from '@/views/Home.vue'; import About from '@/views/About.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ]; const router = createRouter({ history: createWebHashHistory(), // 使用浏览器的哈希历史模式 routes, }); export default router; ``` 3. **在组件中使用`this.$router`**: 在需要导航的地方,比如按钮点击事件或导航链接上,你可以使用`this.$router.push`或`this.$router.go`来导航: ```html <!-- 在一个组件内的按钮 --> <button @click="goToAbout"> Go to About </button> <!-- 使用组件内部的方法 --> methods: { goToAbout() { this.$router.push('/about'); } } ``` 4. **设置`<router-view>`**: 在App.vue或其他布局组件中,添加`<router-view>`标签,它会根据当前的路由显示相应的组件。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值