vue3中如何配置路由

2022-05-09 21:00:51 阅读：269 来源： 互联网

标签：vue 管理器配置 vue3 import router Foo 路由

1.下载vue-router,在路由文件中引入相关依赖

import {createRouter, createWebHashHistory} from "vue-router";

import Foo from "../components/Foo.vue";
import Bar from "../components/Bar.vue";
import User from "../components/User.vue";

2创建路由信息对象数组

const routes=[
    {path:'/foo',component:Foo},//route 每一组路由信息对象
    {path: '/bar',component: Bar},
    //动态路由的设置

    {path:'/user/:id/:name/:age',component: User,props:true}
]

3创建路由管理器对象并对外抛出

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

)
//经路由管理器对外抛出
export default router;

4在main.js使用use(router)方法，将路由管理器对象与当前vue项目相关联

import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";

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

5在项目中设置路由导航router-link与路由出口router-view

<div>
    <h6>路由导航</h6>
    <div>
      <router-link to="/foo">foo</router-link>
      <router-link to="/bar">bar</router-link>
      <router-link to="/user/1/xiaohong/18">user1</router-link>
      <router-link to="/user/2/xiao/18">user2</router-link>
      <router-link to="/user/3/xhah/18">user3</router-link>
    </div>
    <h6>路由出口</h6>
    <router-view></router-view>
  </div>

标签：vue,管理器,配置,vue3,import,router,Foo,路由
来源： https://www.cnblogs.com/loveyinlanrui/p/16250887.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3中如何配置路由