vue3 配置路由

使用 vue3 配置路由,步骤如下

 

1、安装路由

npm install vue-router@4

笔者这里的演示项目名称是 vue3-project

 

2、新建页面

这里创建 view目录,然后在view目录下创建 A.vue B.vue 两个 vue页面文件

A.vue内容

<template>
    <div>A</div>
</template>

B.vue内容

<template>
    <div>B</div>
</template>

 

3、创建路由配置文件

新建 router目录,然后在 router目录下新建 index.js和 routes.js文件

index.js 文件内容如下

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'

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

export default router

routes.js 文件内容如下

const routes = [
    {
        name: 'a',
        path: '/a',
        component: () => import('@/view/A')
    },
    {
        name: 'b',
        path: '/b',
        component: () => import('@/view/B')
    },
    
];

export default routes

在 main.js中配置路由

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

//注意use要在mount之前
createApp(App).use(router).mount('#app')

 

4、添加 router-view

笔者这里为了演示在 app.vue文件中添加,读者可根据自己的情况进行添加

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <router-view></router-view>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

路由控制在 HelloWorld.vue文件中

使用 this.$router.push()方法进行路由跳转

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div>
      <button @click="show('a')">A页面</button>
      <button @click="show('b')">B页面</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    show(index) {
      if(index == 'a') {
        this.$router.push('/a')
      }
      if(index == 'b') {
        this.$router.push('/b')
      }
    }
  }
}
</script>

 

5、运行效果

至此完

### Vue3 中安装和配置 vue-router 的教程 #### 1. 安装 `vue-router` 库 为了在 Vue3 项目中使用路由功能,首先需要通过 npm 或 yarn 来安装 `vue-router`。执行以下命令完成库的安装: ```bash npm install vue-router@next ``` 或者如果使用 Yarn,则运行如下命令: ```bash yarn add vue-router@next ``` 这一步骤确保了项目的依赖环境中包含了最新版本的 `vue-router`,适用于 Vue3 版本[^1]。 --- #### 2. 配置路由规则 定义路由规则的核心在于指定路径与对应的组件之间的映射关系。以下是创建路由规则的一个典型例子: ```javascript // 导入必要的模块 import { createRouter, createWebHistory } from &#39;vue-router&#39;; // 定义路由规则 const routes = [ { path: &#39;/home&#39;, name: &#39;Home&#39;, component: () => import(&#39;@/views/Home.vue&#39;) // 动态导入组件以优化性能[^3] }, { path: &#39;/course&#39;, name: &#39;Course&#39;, component: () => import(&#39;@/views/Course.vue&#39;) } ]; // 创建路由器实例 const router = createRouter({ history: createWebHistory(), routes // 将路由规则传递给路由器 }); export default router; ``` 上述代码片段展示了如何设置基本的路由规则以及动态加载组件的方式。这种方式不仅提高了应用的响应速度,还减少了初始加载时间[^2]。 --- #### 3. 绑定路由Vue 实例 为了让整个应用程序能够识别并管理路由状态,在主入口文件(通常是 `main.js` 或 `main.ts`)中需将路由绑定到 Vue 实例上: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import router from &#39;./router&#39;; // 假设路由配置存储于 ./router 文件夹下 const app = createApp(App); app.use(router); // 注册路由中间件 app.mount(&#39;#app&#39;); // 挂载根节点 ``` 此操作使得所有的子组件都可以访问当前路由的状态,并且可以基于这些状态渲染不同的视图。 --- #### 4. 页面跳转与导航守卫 除了基础配置外,还可以利用 `<router-link>` 和 `$router.push()` 方法来实现页面间的平滑切换;同时也可以借助导航守卫控制用户的访问权限或触发特定逻辑处理。 例如,在模板中可以通过下面方式构建链接按钮: ```html <template> <div> <!-- 使用 Router Link --> <router-link to="/home">回到首页</router-link> | <router-link :to="{name:&#39;Course&#39;}">课程列表</router-link> <!-- 渲染匹配的内容 --> <router-view></router-view> </div> </template> ``` 而全局前置钩子则可用于拦截请求前的操作验证: ```javascript router.beforeEach((to, from, next) => { console.log(`Navigating from ${from.path} to ${to.path}`); next(); // 放行 }); ``` 以上内容涵盖了从安装、初始化到实际使用的全过程说明。 ---
评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悟世君子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值