基于vue-cli的vue项目之路由1--最基本的使用

1.第一个子页面
./components/hello.vue
<template>
<div class="hello">
<h1>这个是hello页面</h1>
<h2></h2>
</div>
</template>
<script>
export default {
name: 'hello',
data() {
return {
msg: 'this is the hello页面'
}
},
props: ['logo']
}
</script>
2.第二个子页面
./components/foo.vue
<template>
<div class="hello">
<h1>这个是foo页面</h1>
<h2></h2>

</div>
</template>
<script>
export default {
name: 'hello',
data() {
return {
msg: '这个是foo.vue页面'
}
},
props: ['logo']
}
</script>
3.配置router的index文件
./src/router/index//路由的配置文件使用use方法，
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{
path: '/hello',
component: require('../components/Hello.vue')
},
{
path: '/foo',
component: require('../components/foo.vue')
},
{ path: '*', redirect: '/hello' },//配置默认页面路径
]
})
export default router;

4.配置app.vue
./src/App.vue//配置vue的主界面。使用router-view以及router-link
<template>
<div id="app">
<!-- <hello></hello> -->
<div class="nav">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<ul>
<li>
<router-link to="/hello">hello</router-link>
</li>
<li>
<router-link to="/foo">foo</router-link>
</li>
</ul>
</div>
<div class="main">
<router-view ></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'app',
components: {}
}
</script>
<style>
body {
background-color: #f8f8ff;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
color: #2c3e50;
}
.nav {
position: fixed;
width: 108px;
left: 40px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li {
width: 108px;
height: 48px;
line-height: 48px;
border: 1px solid #dadada;
text-align: center;
}
.nav ul li a {
text-decoration: none;
}
.main {
height: 400px;
margin-left: 180px;
margin-right: 25px;
}
</style>
5.配置main.js//
./src/main.js//配置基础的文件路径，以及使用路由
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import router from './router'

Vue.use(VueRouter)
new Vue({
el: '#app',
router,
render: h => h(App)
})