Vue路由的實現

時間 2019-12-08

原文原文鏈接

1、下載 vue-router

npm install vue-router --save

2、編碼

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。