查看: 3186|回复: 0

[HTML代码] vue-router实例

发表于 2018-1-2 08:00:00

最近刚刚用vue写了个公司项目,使用vue-cli构建的,算是中大型项目吧,然后这里想记录并且分享一下其中的知识点,希望对大家有帮助,后期会逐渐分享;话不多说,直接上代码!!

app.vue

  1. 1 <template>
  2. 2 <div id="app">
  3. 3 <router-view></router-view>
  4. 4 </div>
  5. 5 </template>
  6. 6
  7. 7 <script>
  8. 8 export default {
  9. 9 name: 'app'
  10. 10 }
  11. 11 </script>
  12. 12
  13. 13 <style>
  14. 14
  15. 15 </style>
复制代码

main.js

  1. 1 // The Vue build version to load with the `import` command
  2. 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. 3 import Vue from 'vue'
  4. 4 import App from './App'
  5. 5 import router from './router'
  6. 6 import './assets/css/common.css'
  7. 7
  8. 8 Vue.config.productionTip = false
  9. 9
  10. 10 /* eslint-disable no-new */
  11. 11 new Vue({
  12. 12 el: '#app',
  13. 13 router,
  14. 14 template: '<App/>',
  15. 15 components: { App }
  16. 16 })
复制代码

router文件夹里面的index.js

  1. 1 import Vue from 'vue'
  2. 2 import Router from 'vue-router'
  3. 3 import home from '../components/home' //这里可以选择2种写法,一种是写在这里,一种是写在component里面,看下方代码~
  4. 4
  5. 5 Vue.use(Router)
  6. 6
  7. 7 export default new Router({
  8. 8 mode:'history',
  9. 9 routes: [
  10. 10 {
  11. 11 path: '/',
  12. 12 component: home
  13. 13 },
  14. 14 {
  15. 15 path:'/pagevue',
  16. 16 component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
  17. 17 },
  18. 18 {
  19. 19 path:'/nextpagevue',
  20. 20 component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
  21. 21 }
  22. 22 ]
  23. 23 })
复制代码

home.vue

  1. 1 <template>
  2. 2 <div class="homeMain">
  3. 3 <div>我是首页</div>
  4. 4 <div class="routerName" @click="clickMe">点我进下一个路由</div>
  5. 5 </div>
  6. 6 </template>
  7. 7 <script>
  8. 8 export default{
  9. 9 data(){
  10. 10 return{
  11. 11
  12. 12 }
  13. 13 },
  14. 14 methods:{
  15. 15 clickMe(){
  16. 16 this.$router.push({path:'/pagevue'})
  17. 17 }
  18. 18 }
  19. 19 }
  20. 20 </script>
  21. 21 <style>
  22. 22 </style>
复制代码

pagevue.vue

  1. 1 <template>
  2. 2 <div class="homeMain">
  3. 3 <div>我是子页面</div>
  4. 4 <div class="routerName" @click="returnhome">点我继续进下一个路由</div>
  5. 5 </div>
  6. 6 </template>
  7. 7 <script type="text/javascript">
  8. 8 export default{
  9. 9 methods:{
  10. 10 returnhome(){
  11. 11 this.$router.push({path:'/nextpagevue'})
  12. 12 }
  13. 13 }
  14. 14 }
  15. 15 </script>
复制代码

nextpagevue.vue

  1. 1 <template>
  2. 2 <div class="homeMain">
  3. 3 <div>我是另外一个子页面</div>
  4. 4 <div class="routerName" @click="clickGohome">点我回到首页</div>
  5. 5 </div>
  6. 6 </template>
  7. 7 <script type="text/javascript">
  8. 8 export default{
  9. 9 methods:{
  10. 10 clickGohome(){
  11. 11 this.$router.push({path:'/'})
  12. 12 }
  13. 13 }
  14. 14 }
  15. 15 </script>
复制代码

common.css

  1. 1 * {
  2. 2 margin: 0;
  3. 3 padding: 0; }
  4. 4 .homeMain {
  5. 5 text-align: center;
  6. 6 margin-top: 100px; }
  7. 7 .homeMain .routerName {
  8. 8 color: #1eb89c;
  9. 9 border: 1px solid #1eb89c;
  10. 10 margin-top: 20px; }
  11. 11
  12. 12 /*# sourceMappingURL=common.css.map */
复制代码



回复

使用道具 举报