vue.js客服系统实时聊天项目开发(二十二)vue项目中router.js路由介绍

我心飞翔 分类:vue

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

vue.js客服系统实时聊天项目开发(二十二)vue项目中router.js路由介绍

回复

我来回复
  • 暂无回复内容