vue|vue 简单路由例子 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

你好 - 锐客网body { margin: 0px; -webkit-tap-highlight-color: transparent; background-color: #f5f5f5; }

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

body { margin-bottom: 56px; } #index .nav-bottom { display: flex; background-color: white; position: fixed; bottom: 0px; left: 0px; box-sizing: border-box; width: 100%; box-shadow: 0px 0px 16px rgba(0,0,0,0.05); } #index .nav-bottom-item { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 0px; padding-bottom: 10px; padding-top: 6px; position: relative; color: black; text-decoration: none; } #index .nav-bottom-item:after { content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,0.1); opacity: 0; transition: all ease-in-out 150ms; } #index .nav-bottom-item:active:after { opacity: 1; } #index .nav-bottom-item img { height: 24px; width: 24px; } #index .nav-bottom-item span { height: 16px; font-size: 14px; text-align: center; }