• Vue路由的实现


    一、下载 vue-router

    npm install vue-router --save

    二、编码

    2.1 router/index.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    import Msite from '../pages/Msite/Msite'
    import Search from '../pages/Search/Search'
    import Order from '../pages/Order/Order'
    import Profile from '../pages/Profile/Profile'
    
    
    Vue.use(VueRouter)
    
    
    export default new VueRouter({
        routes: [
            {
                path: '/msite',
                component: Msite
            },
            {
                path: '/search',
                component: Search
            },
            {
                path: '/order',
                component: Order
            },
            {
                path: '/profile',
                component: Profile
            },
            {
                path: '/',
                redirect: '/msite'
            },
        ]
    })

    2.2 main.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    
    new Vue({
        el: '#app',
        render: h => h(App),
        router,
    })

    2.3 components/FooterGuide/FooterGuide.vue

    <template>
            
    </template>
    
    <script>
        export default {
            name: 'FooterGuide',
            data () {
                return {
    
                }
            },
            methods: {
    
            }
        }
    </script>
    
    <style lang="stylus" rel="stylesheet/stylus">
        
    </style>

    2.4 App.vue

    <template>
        <div id="app">
            <router-view/>
            <FooterGuide/>
        </div>
    </template>
    
    <script>
        import FooterGuide from '@/components/FooterGuide/FooterGuide'
    
        export default {
            name: 'App',
            data () {
                return {
    
                }
            },
            methods: {
    
            },
            components: {
                FooterGuide
            }
        }
    </script>
    
    <style lang="stylus" rel="stylesheet/stylus">
        #app
            width 100%
            height 100%
            background #f5f5f5
    </style>

    2.5 index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,u
    ser-scalable=no">
        <link rel="stylesheet" href="/static/css/reset.css">
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css"></link>
        <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
        <script>
            if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                    FastClick.attach(document.body);
                }, false);
            }
            if(!window.Promise) {
                document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
            }
        </script>
        <title>shop</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
  • 相关阅读:
    gradle
    1-NIO使用
    处理非正常终止的错误
    一个取消多生产者单消费者的日志线程池服务
    executes()源码
    死锁
    CyclicBarrier使用
    Semaphore
    Spring学习(4)IOC容器配置bean:定义与实例化
    在Maven上Web项目添加Spring框架
  • 原文地址:https://www.cnblogs.com/mxsf/p/10859519.html
Copyright © 2020-2023  润新知