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

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