最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享;话不多说,直接上代码!!
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import './assets/css/common.css' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '', components: { App } })
import Vue from 'vue' import Router from 'vue-router' import home from '../components/home' //这里可以选择2种写法,一种是写在这里,一种是写在component里面,看下方代码~ Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: home }, { path:'/pagevue', component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue), }, { path:'/nextpagevue', component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue), } ] })
<template> <div class="homeMain"> <div>我是首页</div> <div class="routerName">点我进下一个路由</div> </div> </template> <script> export default{ data(){ return{ } }, methods:{ clickMe(){ this.$router.push({path:'/pagevue'}) } } } </script> <style> </style>
<template> <div class="homeMain"> <div>我是子页面</div> <div class="routerName">点我继续进下一个路由</div> </div> </template> <script type="text/javascript"> export default{ methods:{ returnhome(){ this.$router.push({path:'/nextpagevue'}) } } } </script>
<template> <div class="homeMain"> <div>我是另外一个子页面</div> <div class="routerName">点我回到首页</div> </div> </template> <script type="text/javascript"> export default{ methods:{ clickGohome(){ this.$router.push({path:'/'}) } } } </script>
* { margin: 0; padding: 0; } .homeMain { text-align: center; margin-top: 100px; } .homeMain .routerName { color: #1eb89c; border: 1px solid #1eb89c; margin-top: 20px; } /*# sourceMappingURL=common.css.map */
以上是vue-router实例详细讲解的详细内容。更多信息请关注PHP中文网其他相关文章!