vue.js客服系统实时聊天项目开发(二十二)vue项目中router.js路由介绍
2023-06-13 09:17:02 时间
vue项目的路由就相当于我们在网址url上输入的地址,访问的具体网址就是路由
拿到项目先看看路由文件,就能知道具体的访问地址了
例如下面的router.js
import Vue from 'vue'
import Router from 'vue-router'
//登录页
import Login from './components/Login.vue'
//PC访客聊天页
import ChatPage from './components/ChatPage.vue'
//H5访客聊天
import ChatApp from './components/ChatApp.vue'
//客服主面板
import Main from './components/Main.vue'
//在线访客页
import OnlineVisitor from './components/OnlineVisitor.vue'
//等等
Vue.use(Router)
export default new Router({
routes: [
{ path: '/login', component: Login },
{ path: '/chatPage', component: ChatPage },
{ path: '/chatApp', component: ChatApp },
{ path: '/main', component: Main ,
children:[
{
path:'onlineVisitor',
component:OnlineVisitor
},
]
},
]
})
当你访问 域名/#/login 时,就会呈现 Login 组件的内容;
访问 域名/#/chatPage 时,就会呈现 ChatPage 组件的内容;以此类推。
此外,Main 组件是一个嵌套路由,在 /main 路由下还有一个子路由 /onlineVisitor,这样你访问 域名/#/main/onlineVisitor 时,就会呈现 OnlineVisitor 组件的内容。
我们的访客聊天界面就是下面这样访问
http://localhost:8080/#/chatApp?ent_id=5&to_id=taoshihan 访问的就是这个界面组件 ./components/ChatApp.vue
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- 不用React Vue,只用原生JS,如何开发单页面应用?
- Vue中使用formdata配合fetch使用
- 记一场vue面试
- Vue 2x 中使用 render 和 jsx 的最佳实践 (1)
- Vue学习笔记之vue.js 两个等号 == 和三个等号===的区别 数字0和空字符串
- vue富文本编辑器插件推荐_elementui富文本编辑器
- vue.js和jquery的区别_人和人类的区别是什么
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue如何引入js文件_vue中引入外部js好麻烦
- vue如何引用js文件_html转化为vue组件
- vue如何引用外部js_引入外部js文件
- vue 项目启动报错:Syntax Error: Unexpected token 的解决方法
- vue.js客服系统实时聊天项目开发(一)路由与子路由-全局变量-elementui搭建基本框架
- vue.js客服系统实时聊天项目开发(八)使用axios post请求访客初始化接口
- vue.js客服系统实时聊天项目开发(十四)点击加载展示历史消息列表
- vue源码分析-从new Vue开始_2023-02-24
- 初识vue.js模板语法
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- get两个js小技能——JS截取视频第一帧&图片转Base64
- 开心档-软件开发入门之Vue.js 响应接口
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- Vue结合Redis实现性能优化(vue引入redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- 研究Oracle VUE价格探究深入探究和分析(oracle vue价格)
- CSS和JS标签style属性对照表(方便js开发的朋友)