vue 简单路由例子

记录一个vue路由例子，也是看过一篇文章，然后忘记原链接了，怕忘记，所以写下来。
打开nodejs，下载模板

vue init webpack-simple hello

然后就是一路回车回车回车就OK了

image.png

接下来就是安装vue-router和syntax-dynamic-import
vue-router是路由依赖的包
syntax-dynamic-import是懒加载依赖的包

cnpm install vue-router --save
cnpm install --save-dev babel-plugin-syntax-dynamic-import

image.png

然后安装项目

cnpm install

image.png

测试一下，没什么问题

cnpm run dev

image.png

模板弄好了，开始配置项目了

配置新建一个router.config.js文件，与main.js放到同一个目录

export default
{
    routes:
    [
        {
            path:"/",
            component:() => import(/* webpackChunkName: "index" */ './view/index.vue'),
        }
    ]
}

新建一个view目录，在view目录里新建一个index.vue，随便写点文字就行了

main.js引入router.config.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import App from './App.vue'
import routerConfig from './router.config.js'

var router = new VueRouter(routerConfig);
new Vue({
    el: '#app',
    render: h => h(App),
    router: router,
})

接下来是App.vue

设置好了，但还用不了，如果你尝试运行就会发现出错，还要配置.babelrc文件。
往.babelrc文件里添加一行代码

"plugins": ["syntax-dynamic-import"]

.babelrc文件完整的代码是这样的

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
"plugins": ["syntax-dynamic-import"]
}

然后运行就能看到结果了

cnpm run dev

image.png

image.png

子路由

但是这例子内容好像太简单了，来加点东西吧
手机页面，底部菜单有首页、其他、个人中心

index.html

router.config.js

export default
{
    routes:
    [
        {
            path:"/",
            component:() => import(/* webpackChunkName: "index" */ './view/index.vue'),
            redirect:"/index/home",//默认跳转到首页
            children:
            [
                {
                    path:"/index/home",
                    component:() => import(/* webpackChunkName: "index" */ './view/index/home.vue'),
                },
                {
                    path:"/index/other",
                    component:() => import(/* webpackChunkName: "index" */ './view/index/other.vue'),
                },
                {
                    path:"/index/my",
                    component:() => import(/* webpackChunkName: "index" */ './view/index/my.vue'),
                }
            ]
        },
        {
            path: "*",
            redirect: "/"
        }
    ]
}

index.vue