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

介绍

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

功能包括:

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

用法

1. 安装

通过 npm 或 yarn 安装 Vue Router。

javascript 复制代码
npm install vue-router@4  
# 或者  
yarn add vue-router@4

2. 创建路由配置

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

routes.ts

TypeScript 复制代码
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

TypeScript 复制代码
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 应用中。

TypeScript 复制代码
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

html 复制代码
<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

html 复制代码
<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 才能知道在哪里渲染当前路由对应的组件。

相关推荐
Fantastic_sj1 小时前
CSS-in-JS 动态主题切换与首屏渲染优化
前端·javascript·css
鹦鹉0072 小时前
SpringAOP实现
java·服务器·前端·spring
墨染枫4 小时前
pytorch学习笔记-自定义卷积
pytorch·笔记·学习
再学一点就睡5 小时前
手写 Promise 静态方法:从原理到实现
前端·javascript·面试
再学一点就睡5 小时前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
今天也好累6 小时前
C 语言基础第16天:指针补充
java·c语言·数据结构·笔记·学习·算法
前端工作日常6 小时前
我理解的eslint配置
前端·eslint
前端工作日常6 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔7 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
OEC小胖胖7 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web