Vue.js框架--路由模块化（二十六）

浅浅的花香味﹌ 2024-02-19 12:41 33阅读 0赞

**主要操作技能：**

1>创建文件夹\\router.js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70][]  
2>写入相关路由配置 router.js

import Vue from 'vue'
    
    //0. 使用路由
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    //1. 定义 (路由) 组件。
    import Home from '../components/Home.vue'
    import News from '../components/News.vue'
    import Buy from '../components/Buy.vue'
    
    //2. 定义路由
    const routes = [{
    		path: '/home',
    		component: Home
    	},
    	{
    		path: '/news',
    		component: News
    	},
    	{
    		path: '/buy',
    		component: Buy
    	},
    	{ //默认首页不能有参数
    		path: '*',
    		redirect: '/home'
    	}
    ]
    
    //3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
    	routes // (缩写) 相当于 routes: routes
    })
    
    //4.导出路由
    export default router;

3>在main.js中导入 import router from './router/router.js'  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/aa71cb8438c54b73b78cec6906e59493.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_27_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/512990ddd97944ba80f0907b79e838a4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关第六篇：express路由拆分（模块化）

Node.js 是构建高性能、可扩展网络应用程序的运行时环境。它基于 Chrome V8 JavaScript 引擎，并采用事件驱动、非阻塞的 I/O 模型，使得它能够处...

心已赠人/ 2024年04月21日 08:11/ 0 赞/ 86 阅读

相关 Vue.js框架--路由模块化（二十六）

主要操作技能： 1>创建文件夹\\router.js文件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

浅浅的花香味﹌/ 2024年02月19日 12:41/ 0 赞/ 34 阅读

相关 Vue.js框架--嵌套路由（二十）

主要操作技能嵌套路由就是 (路由里面嵌套他的子路由) 子路由关键属性children 1）配置路由 { path: '/u

红太狼/ 2024年02月18日 23:49/ 0 赞/ 68 阅读

相关 Vue.js框架--路由（十六）

主要操作技能：官网 https://router.vuejs.org/ 中文网 https://router.vuejs.org/zh/guide/ vue路由

朱雀/ 2024年02月18日 23:40/ 0 赞/ 61 阅读

相关 nodejs+express路由模块化

之前我们的代码都是写在了app.js中，不利于阅读维护，多人开发时肯定问题繁多，所以我们需要将路由模块化。如果我们的功能主要有登录，商品管理，那么主要的模块就是登录和商品

左手的ㄟ右手/ 2023年06月30日 15:53/ 0 赞/ 47 阅读

相关 React 路由模块化

[https://www.cnblogs.com/yuyujuan/p/10146421.html][https_www.cnblogs.com_yuyujuan_p_1014

素颜马尾好姑娘i/ 2022年12月11日 05:23/ 0 赞/ 223 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 304 阅读

相关 vuejs的路由功能

最简单的路由 1，原理：通过控制父组件一个路由变量的值，来动态改变指向的组件; 而被指向的组件又通过渲染方法被渲染到父组件中，因此当指向组件改变时，被

港控/mmm°/ 2022年05月24日 04:53/ 0 赞/ 248 阅读

相关 CCNP路由实验之十六策略路由(PBR)

CNP路由实验之十六策略路由(PBR) 策略路由（PBR）是一种比基于目标网络进行路由更加灵活的数据包路由转发机制。路由器将通过路由图决定如何对需要路由的数据包进行处

桃扇骨/ 2021年12月16日 15:57/ 0 赞/ 1243 阅读

相关 AngularJs 路由模块化

项目工程化: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

亦凉/ 2021年07月24日 16:53/ 0 赞/ 457 阅读