| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> VUE.JS的路由配置 -> 正文阅读 |
|
[JavaScript知识库]VUE.JS的路由配置 |
????????介绍????????????????路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件 ????????安装? ? ? ? ? ? ? ? npm install vue-router ????????配置????????????????在src文件新建文件夹router用来存放路由器的配置文件 在routes.js中引入所需要展示的页面 ?配置一级路由路径 图中Test02为引入的页面,名称与上方import的值对应 ?path为定义的路由路径 App.vue是项目的主组件,页面入口文件?,所有页面都在App.vue下进行切换,app.vue负责构建定义及页面组件归集。 配置好路由之后在App.vue中 <div id ="app"></div>中放置一个<router-view></router-view> 将路由器匹配的组件渲染在这里。 二级路由配置原理基本一致 ?即在所在的一级路由的配置下添加children:[填写当前二级路由的路径的配置信息] ?二级路由的路径需填所在一级路由的路径后接二级路径 同样在所在的一级路径所属页面下的div里面也放置一个<router-view></router-view> 将路由器匹配的组件渲染在这里。 最后再通过 export default routers(与上定义routers对应)? 输出routers 切换到main.js下 引入? import?VueRouter?from?'vue-router'?? 再引入刚刚所配置好的路由 ?引进的vue-router必须要通过? 构建VueRouter对象,把引进的路由配置文件放进去 Vue.config.productionTip = false You are running Vue in development mode. new Vue({ render: h => h(App), }).$mount('#app')这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount(’#app’)方法。 $mount(’#app’) :手动挂载到id为app的dom中的意思 ?再将构建的VueRouter对象放进来即可。 |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/27 20:43:20- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |