IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: 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必须要通过?Vue.use()使用路由

构建VueRouter对象,把引进的路由配置文件放进去

Vue.config.productionTip = false
上面这行代码的意思 是阻止显示生产模式的消息。
如果没有这行代码,或者设置为true,控制台就会多出这么一段代码。

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

大概意思就是:
你运行的Vu是开发模式。为生产部署时,请确保启用生产模式。

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项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-08 10:37:59  更:2021-09-08 10:40:07 
 
开发: 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-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计