一、下载 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>
