zoukankan      html  css  js  c++  java
  • vue的roter使用

    1在src下建立router文件夹,再建立router.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import home from '../components/home'
    import page01 from '../components/page01'
    import page02 from '../components/page02'
    import page01A from '../components/page01/page01-A'
    import page01B from '../components/page01/page01-b'
    import pageEnd from '../components/page01/B/end'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: home
        },
        {
          path: '/home',
          name: 'home',
          component: home
        },
        {
          path: '/page01',
          name: 'page01',
          component: page01,
          children: [
            {
              path: 'page01-a',
              name: 'page01A',
              component: page01A
            },
            {
              path: 'page01-b',
              name: 'page01B',
              component: page01B,
              children: [
                {
                  path: 'end',
                  name: 'pageEnd',
                  component: pageEnd
                }
              ]
            }
          ]
        },
        {
          path: '/page02',
          name: 'page02',
          component: page02
        }
      ]
    })

    2.第二步 设置main.js

    import VueRouter from 'vue-router';
    import router from './router/router';
    Vue.use(VueRouter);
    
    
    Vue.prototype.$goRoute = function (index) {
      this.$router.push(index)
    }
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      render: h => h(App)
    });

    第三步:写页面

    <template>
      <div>
        <div>
          <ul>
            <li v-for="item in links"><a @click="$goRoute(item.route)">{{item.text}}</a></li>
          </ul>
          <router-view></router-view>
        </div>
      </div>
    
    </template>
    
    <script type="text/ecmascript-6">
      export default {
        name: 'app',
        data () {
          return {
            links: [
              {
                text: '胡萝卜',
                route: '/home'
              },
              {
                text: '大白菜',
                route: '/page01'
              },
              {
                text: '水蜜桃',
                route: '/page02'
              }
            ]
          }
        }
      }
    </script>
  • 相关阅读:
    leetcode Majority Element
    Missing Number 三种解法
    Effective C++学习笔记 chapter 1
    C++ 笔记
    三色排序
    归并排序-就地排序
    506,display有哪些值?说明他们的作用
    505,display,float,position之间的关系(有疑问)
    504,什么是FOUC?怎么避免
    503,display:none;与visibility:hidden;的区别
  • 原文地址:https://www.cnblogs.com/norm/p/7350239.html
Copyright © 2011-2022 走看看