项目之配置路由

移动端的必须配置
1.视口(viewport)

//在index.html文件中配置视口 保证屏幕1:1的关系

2.点击响应延迟3毫秒
这个配置项主要是为了检查用户是否在做双击，但是为了能够立即响应用户的点击事件，所以才有了FastClick

//在index.html文件下的script标签添加即可

一级路由的配置

要做出这样的一个页面出来

微信截图_20181107012848.png

1.在router文件夹下新建一个index.js的文件，引入对应模块并声明使用

//引入对应模块
import Vue from 'vue'
import VueRouter from 'vue-router'
//声明使用
Vue.use(VueRouter);

2.输出路由对象

export default new VueRouter({
    //3.1 配置一级路由
)}

3.在pages目录下创建子路由文件，在此项目中分别对应的是chat,home,me,recommend,search,并且每个目录下都有所对应的子路由文件，比如Me.vue

微信截图_20181107013646.png

4.接下来配置一级路由

//引入子路由文件
import Home from './../pages/Home/Home'
import Recommend from './../pages/Recommend/Recommend'
import Search from './../pages/Search/Search'
import Chat from './../pages/Chat/Chat'
import Me from './../pages/Me/Me'

//3.输出路由对象
export default new VueRouter({
    //配置一级路由
    routes:[
        {
            path:'/home',
            component:Home,
        },
        {
            path:'/search',
            component:Search
        },
        {
            path:'/recommend',
            component:Recommend
        },
        {
            path:'/chat',
            component:Chat
        },
        {
            path:'/me',
            component:Me
        },
        {
            path:'/',        // 设置默认打开为home路由
            redirect:'/home'
        },
    ]
})

5.在main.js中引入路由器

import Vue from 'vue'
import App from './App'

//引入路由器
import router from './router/index'

Vue.use(Lytab);
new Vue({
    el:'#app',
    router,
    render:h=>h(App)
})

配置完成路由后，增加了两个属性供访问使用 route

6.在主面板app.vue中设置router-view