Vue项目路由配置

关注

已于 2022-07-21 16:55:15 修改 · 839 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Vue开发（一）—— 脚手架搭建项目及配置路由一、正常的vue-cli搭建项目 1、安装cnpm ：$ npm install -g cnpm --registry=https://registry.npm.taobao.org 2、vue-cli全局安装：cnpm install -g vue-cli 3、用脚手架搭建一个基于webpack的新项目：vue init webpack 项目名字 4、打开项目： cd 项目名字安装依赖... 阅读详情

这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili

vue-router是基于路由和组件的

路由用户设定访问路径的，将路径和组件映射起来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换

执行命令在vue项目下安装vue-router

npm install vue-router -S

然后在src目类下新建router文件夹和index.js路由配置文件。

//  ../my-vue-app/src/router/index.js下的路由配置文件
import {createRouter,createWebHashHistory} from 'vue-router'

const routes = [
    {
        path:'/',
        component:()=>import('../views/Main.vue'),  //主页面路由
        children:[                                  //子路由 
            {
                path:'/',
                name:'home',
                component:()=>import('../views/home/Home.vue')
            }
        ]
    }
]

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

export default router           //导出路由

构造好路由对象后在main.js主程序中导入并给app对象使用

import router from './router'
...

...
app.use(router)                 //应用路由
app.mount('#app')

导入路由后就可以在前端view界面中进行使用了。首先将App.vue中的template中的内容替换成<router-view />，然后自建Main.vue和home/Home.vue，就可以在其中构造组件并使用路由来进行组件的切换和模块化使用了

标签

#vue.js

从MRF8P9040N数据手册到ADS仿真：手把手教你搞定LDMOS功放设计（附完整模型下载）本文详细解析了MRF8P9040N LDMOS功率放大器的数据手册关键参数，并提供了在ADS中进行仿真的完整指南。从模型导入、直流工作点验证到负载牵引与阻抗匹配设计，逐步指导工程师完成高效功放设计。文章还包含调试技巧和常见问题解决方案，帮助优化射频功放性能。阅读详情

Vue项目路由配置

相关推荐