关于路由配置

2022-05-07 11:04:38 阅读：182 来源： 互联网

标签：管理器配置 component 关于 path routes router 路由

vue3项目中如何配置路由：

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

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

2、创建路由信息对象数组

routes:[
        {path:'/bar',component:Bar},
        {path:'/foo',component:Foo},
    ]

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

const router = createRouter({
    history:createWebHashHistory(),
    linkActiveClass:"router-active",
    routes:[]
})

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

//将配置好的路由管理器对象与当前vue项目相关联
createApp(App).use(router).mount('#app')

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

<router-link to="/bar">bar</router-link>
<router-link to="/foo">电影</router-link>
<router-link to="/user/1/aaa/111">user-1</router-link>
<router-link to="/user/2/bbb/212">user-2</router-link>
<router-link to="/user/3/ccc/21">user-3</router-link>
<router-view/>

6、常见面试题：route、routes、router的区别

router：一组路由信息对象

{path:'/bar',component:Bar},

routes：路由信息对象数组

routes:[
        {path:'/bar',component:Bar},
        {path:'/foo',component:Foo},
    ]

router：路由管理器对象

const router = createRouter({})

标签：管理器,配置,component,关于,path,routes,router,路由
来源： https://www.cnblogs.com/yh983521/p/16241537.html

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

ICode9