vue-router学习1：安装与基本用法

时间：2024-04-21 22:06:42

介绍

Vue Router 是 Vue.js 的官方路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得轻而易举。

功能包括：

  • 嵌套路由映射
  • 动态路由选择
  • 模块化、基于组件的路由配置
  • 路由参数、查询、通配符
  • 展示由 Vue.js 的过渡系统提供的过渡效果
  • 细致的导航控制
  • 自动激活 CSS 类的链接
  • HTML5 history 模式或 hash 模式
  • 可定制的滚动行为
  • URL 的正确编码

用法

1. 安装

通过 npm 或 yarn 安装 Vue Router。

npm install vue-router@4  
# 或者  
yarn add vue-router@4

2. 创建路由配置

在 src 目录下创建一个 router 文件夹，并在其中创建两个文件：index.ts 和 routes.ts。

routes.ts

import { RouteRecordRaw } from 'vue-router';  
import Home from '../views/Home.vue';  
import About from '../views/About.vue';  
  
const routes: Array<RouteRecordRaw> = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home,  
  },  
  {  
    path: '/about',  
    name: 'About',  
    component: About,  
  },  
  // 其他路由...  
];  
  
export default routes;

index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';  
import routes from './routes';  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes,  
});  
  
export default router;

 3. 在 main.ts 中集成路由

打开 src/main.ts 文件，并将 Vue Router 集成到 Vue 应用中。

import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router';  
  
const app = createApp(App);  
  
app.use(router);  
  
app.mount('#app');

4. 在组件中使用路由

现在，你可以在任何 Vue 组件中使用路由了。例如，在 Home.vue 或 About.vue 组件中，你可以使用 <router-link> 和 <router-view> 组件进行导航和渲染。

Home.vue

<template>  
  <div>  
    <h1>Home Page</h1>  
    <router-link to="/about">Go to About</router-link>  
  </div>  
</template>  
  
<script lang="ts">  
import { defineComponent } from 'vue';  
  
export default defineComponent({  
  name: 'Home',  
});  
</script>

About.vue

<template>  
  <div>  
    <h1>About Page</h1>  
    <router-link to="/">Go back to Home</router-link>  
  </div>  
</template>  
  
<script lang="ts">  
import { defineComponent } from 'vue';  
  
export default defineComponent({  
  name: 'About',  
});  
</script>

注意： 确保你的 App.vue 组件中有一个 <router-view></router-view> 标签，这样 Vue Router 才能知道在哪里渲染当前路由对应的组件。

相关文章