Maison > Article > Tutoriel système > Explication détaillée de l'instance vue-router
J'ai récemment écrit un projet d'entreprise en utilisant vue. Il a été construit en utilisant vue-cli. Il est considéré comme un projet de taille moyenne à grande. Ensuite, j'aimerais enregistrer et partager les points de connaissances ici. à tout le monde. Je le partagerai progressivement plus tard ; sans plus attendre, passons directement au code ! !
// 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 */
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!