vue3中的路由写法

1、scr文件下创建一个router文件夹 文件夹下创建要给index.js

// 引入路由对象
import { createRouter, createWebHistory } from 'vue-router'
// 路径配置 .vue 不可省略
const routes = [
    { path: '/', redirect: '/hello'},
    {path: '/hello', name: 'hello', component: () => import('../components/HelloWorld.vue')},
    {path: '/home', name: 'home', component: () => import('../components/home.vue')},
]
const router = createRouter({
    history: createWebHistory(), // 1、createWebHistory 创建history路由模式   2、createWebHashHistory 创建hash路由模式
    routes: routes
})
export default router

2.在main.js下引入配置路由的文件并且挂载在实例中

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

const app = createApp(App).use(router).mount('#app')

3.App.vue写上<router-view></router-view>

<script setup>
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>

4.效果

### Vue 3路由的实现方法 Vue 3 使用 `vue-router` 库来管理应用中的导航和组件加载。以下是关于如何在 Vue 3 项目中配置和使用路由的具体说明。 #### 安装 Vue Router 为了在 Vue 3 项目中使用路由功能,首先需要安装最新版的 `vue-router`: ```bash npm install vue-router@next ``` 此命令会自动下载适用于 Vue 3 的版本[^1]。 --- #### 基本路由配置 创建一个名为 `router.js` 或 `index.js` 的文件用于定义路由规则。以下是一个简单的示例: ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39;; import Home from &#39;../views/Home.vue&#39;; // 主页组件 import Category from &#39;../views/Category/index.vue&#39;; // 分类页面组件 const routes = [ { path: &#39;/&#39;, name: &#39;Home&#39;, component: Home, }, { path: &#39;/category/:id&#39;, // 动态参数 :id name: &#39;Category&#39;, component: Category, props: true, // 启用 props 将动态参数传递给组件 } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 上述代码展示了基本的路由设置方式,其中 `/category/:id` 表示带有动态参数的路径[^2][^3]。 --- #### 在主入口文件引入并挂载路由器 编辑项目的主入口文件(通常是 `main.js`),将路由器实例注入到根组件中: ```javascript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import router from &#39;./router&#39;; const app = createApp(App); app.use(router); // 注册路由 app.mount(&#39;#app&#39;); ``` 通过这种方式,整个应用程序都可以访问路由系统。 --- #### 页面模板与导航链接 在实际开发过程中,通常会在 `.vue` 文件中编 HTML 结构以及绑定数据逻辑。例如,在某个父级组件中可以这样渲染子路由内容: ```html <template> <div> <h1>这是首页</h1> <!-- 导航 --> <router-link to="/">回到主页</router-link><br /> <router-link :to="{name:&#39;Category&#39;, params:{id:1}}">进入分类页面(id=1)</router-link> <!-- 子路由出口 --> <router-view></router-view> </div> </template> ``` 这里 `<router-link>` 提供了一种声明式的导航方式;而 `<router-view>` 则作为占位符显示当前匹配的视图内容。 --- #### Props 参数传递 如果希望更灵活地向目标组件传入额外的数据,则可以在路由对象里开启 `props` 属性支持。当启用该选项后,所有 URL 上查询字符串或者片段都会被解析成对应的键值对形式发送过去。 比如上面提到过的 `Category` 组件内部可以直接接收这些属性: ```javascript // views/Category/index.vue <script setup> defineProps([&#39;id&#39;]); // 接收来自路由的 id 参数 </script> <template> <p>当前分类 ID:{{ id }}</p> </template> ``` 如此一来便实现了基于路径变化更新展示信息的效果。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值