vue3怎么设置路由 Vue Route

1. 安装Vue Router

bash 复制代码
npm install vue-router

2. 创建Home.vue组件

src/views 目录下创建一个名为 Home.vue 的文件:

html 复制代码
<!-- <template> 标签是Vue组件的模板部分,其中包含了组件的HTML结构。 -->
<template>
    <div>
      <h1>Welcome to Nano Antibody Data Retrieval!</h1>
      <!-- Add your content here -->
    </div>
  </template>
  
  <script>
  export default {
    name: 'Home',
    // Add your component logic here
  };
  </script>
  
  <style scoped>
  /* Add your component styles here */
  </style>
  

script部分导出了一个对象,这个对象描述了 Home.vue 组件的行为和逻辑。name 属性用于指定组件的名称,这对于调试和组件间通信非常有用。你可以根据需要在这里添加其他属性和方法,比如数据、计算属性、生命周期钩子等。

style scoped 是 Home.vue 组件的样式部分。scoped 关键字表示这些样式只会应用于当前组件,不会影响到其他组件。你可以在这里添加CSS规则来美化你的组件,比如修改标题的颜色、设置背景等。

3. 设置基本路由

src/router/index.js 中:

javascript 复制代码
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter); // 告诉Vue在全局范围内使用VueRouter插件

// 定义路由
const routes = [ // 定义数组routes,其中包含一个对象,描述了应用程序的路由信息。
  { // 每个路由对象都至少包含 path、name 和 component 属性。
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'), // 对应的组件是:Home.vue组件
  },
  // 在这里添加其他路由
];

// 创建了一个VueRouter实例,将之前定义的路由传递给它:
const router = new VueRouter({
  routes,
});

// 导出VueRouter实例:
export default router;

4. 在main.js中使用Vue Router

src/main.js:

javascript 复制代码
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 导入上面刚创建的VueRouter实例------router

Vue.config.productionTip = false;

new Vue({
  router, // 将router传递给Vue实例,这样Vue实例就能使用VueRouter插件提供的功能了
  render: (h) => h(App),
}).$mount('#app');

5. 上述设置实现了以下目标:

  1. 定义路由规则: 通过 const routes 定义了应用程序的路由规则,包括路径(path)、名称(name)和对应的组件(component)。

  2. 创建VueRouter实例: 通过 const router = new VueRouter({ routes }) 创建了一个VueRouter实例,将路由规则传递给它。

  3. 在Vue实例中使用VueRouter:main.js 文件中,通过 import router from './router'; 导入了VueRouter实例,并将其传递给Vue实例的 router 选项中,使得整个应用能够使用Vue Router插件。

  4. 在组件中使用路由: 当用户访问特定路径时,Vue Router会根据定义的路由规则,动态加载相应的组件,并在页面中显示。这样,你可以在不同的路由下展示不同的内容,实现页面之间的切换。

相关推荐
DoraBigHead1 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu1 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡6 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞8 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu11 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu11 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu12 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge14 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu14 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi19 分钟前
个人写码感悟:TailwindCSS不要忽视子选择器
前端