vue项目开发实战（三）——vue-router

上次我们说了vue项目的打包，存在的问题我还在继续研究中，说回项目本身，我们的项目肯定不是一个页面就能搞定的，需要进行页面间的跳转，而vue本身是一个单页面开发的工具，页面跳转的本质就是组件之间显示与否的切换，我们既可以将整个页面的组件进行切换，也可以对局部组件进行切换

vue-router

vue-router是用来对vue组件设置路由规则的工具

安装与配置

npm install vue-router

main.jsimport VueRouter from 'vue-router'Vue.use(VueRouter)const router=new VueRouter({    routes:[{    }]})

简单的例子

我们想通过访问项目的/login链接来进入一个登陆的界面，假设我们已经完成了这个登陆界面组件的开发，接下来要做的就是利用vue-router将特定的url和组件进行绑定

main.jsimport login from './components/login.vue' #这是我们完成的组件const router=new VueRouter({    routes:[{        path:'/login',          #如果需要为根目录绑定的话直接用'/'        component:login    }]})

进行绑定之后，我们还需要在App.vue中准备一个位置供vue-router渲染特定url对应的组件

App.vue<template>    <div id='app'>        <router-view></router-view>  #对应组件将在这里被渲染    </div></template>

现在npm run dev之后在页面链接之后加上/login，就能看到这个组件被渲染出来了
如果我们想打开项目直接跳转到/login页面该怎么做呢

App.vue<script>export default{    data(){        return{        }    },    created(){        this.$router.push('/login')    }}</script>

push语句使得vue-router将特定url加入了当前路径中，这里的写法有一定问题，之后再进行其他跳转以后只要刷新界面就会回到login界面，这和vue的生命周期有关（建议在官网上研究一下这个created函数），所以真正这样使用时需要加入一些其他的判定条件

路由嵌套

我们的客服系统在进入客服页面之后，需要实现客服点击一个用户按钮之后，在右侧打开这个聊天界面，假设我们的客服页面组件已经实现并且绑定在了/main下，聊天界面组件也已经实现，我们需要做的就是在客服页面的某个地方也插入一个vue-router渲染组件的位置

main.vue<template>...<router-view></router-view>...</template>

要注意这时router渲染聊天界面是在进入/main的前提下的，所以我们需要在/main下嵌套路由

main.jsimport login from './components/login.vue'import main from './component/main.vue'import chat from './component/chat.vue'const router=new VueRouter({    routes:[{        path:'/login',                  component:login        },{        path:'/main',        component:main,        children:[{            path:'chat',            component:chat        }]    }]})

现在我们访问/main/chat就可以看到这个聊天窗口了，也就是说在进入/main之后，它的子路由绑定的组件会交给/main绑定的组件进行渲染，当然你需要在合适的地方添加刚才的push语句来完成这个跳转