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

相关推荐
weixin-a153003083161 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
sealaugh321 小时前
aws(学习笔记第四十八课) appsync-graphql-dynamodb
笔记·学习·aws
ai小鬼头1 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
水木兰亭2 小时前
数据结构之——树及树的存储
数据结构·c++·学习·算法
一只叫煤球的猫2 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
鱼摆摆拜拜2 小时前
第 3 章:神经网络如何学习
人工智能·神经网络·学习
vvilkim2 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim2 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心2 小时前
vben 之 axios 封装
前端·javascript·学习