vue-router构建单页面小案例

用 Vue.js + Vue Router 创建单页应用，是非常简单的,本文将以此做个小案例

一、创建helloWorld.vue文件

<template>
  <div class="hello">
    <p>这是HelloWorld页面</p>
    
    <!--使用router-link组件进行导航，to属性来指定path，router-link默认渲染为a标签-->
    <router-link to="/testRouter1">去到testRouter1页面</router-link>
    <router-link to="/testRouter2">去到testRouter2页面</router-link>


    <div>
      <!--这里是路由的出口，路由匹配的组件渲染到这里-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () { return {} }
}
</script>

<style scoped></style>

二、创建testRouter1.vue文件

<template>
  <div>
    testRouter1
    <button @click="returnPage">返回hello world界面</button>
  </div>
</template>

<script>
export default {
  name: 'TestRouter1',
  data () {
    return {}
  },
  methods:{
    //返回helloworld页面
    returnPage(){
      this.$router.push('/helloWorld');
    }
  }
}
</script>

<style scoped>
  div{
    width: 100%;
    height: 500px;
    line-height: 500px;
    text-align: center;
    font-size: 30px;
    border:1px solid #000;
  }
</style>

三、创建testRouter2.vue文件

<template>
  <div>
    testRouter2
    <button @click="returnPage">返回hello world界面</button>
  </div>
</template>

<script>
export default {
  name: 'TestRouter2',
  data () {
    return {}
  },
  methods:{
    //返回helloworld页面
    returnPage(){
      this.$router.push('/helloWorld');
    }
  }
}
</script>

<style scoped>
  div{
    width: 100%;
    height: 500px;
    line-height: 500px;
    text-align: center;
    font-size: 30px;
    border:1px solid #000;
  }
</style>

四、配置路由index.js

import Vue from 'vue';
import Router from 'vue-router';//引入vue-router
import HelloWorld from '@/components/HelloWorld';
import testRouter1 from '@/components/testRouter1';
import testRouter2 from '@/components/testRouter2';

Vue.use(Router);//应用第三方插件vue-router

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/helloWorld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/testRouter1',
      name:'TestRouter1',
      component:testRouter1
    },
    {
      path:'/testRouter2',
      name:'TestRouter2',
      component:testRouter2
    },
  ]
})

五、项目入口文件main.js中使用路由文件index.js

import Vue from 'vue';
import App from './App';
import router from './router';//项目入口文件main.js中使用路由

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});