1-7 路由的简单配置

1 配置路由

//routers/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Music from '@/views/Music.vue'
import Mv from '@/views/Mv.vue'
Vue.use(Router);
export default new Router({
    mode:"history",
    routes:[
        {
            path:'/music',
            name:"music",
            component:Music
        },
        {
            path:'/mv',
            name:"mv",
            component:Mv
        }
    ]
})

2 App.vue

<template>
  <div id="app">
     <router-view></router-view>
  </div>
</template>

3 main.js

import router from './routers'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4 router-link

<template>
  <div id="app">
    <div id="nav"> 
      <router-link to="/music">音乐</router-link>
      <router-link to="/mv">MV</router-link>
    </div>
     <router-view></router-view>
  </div>
</template>

实现单页面开发的方式

• 通过hash记录跳转的路径(可以产生历史管理)
• 浏览器自带的历史管理的方法history

// 以百度为例http://news.baidu.com/
history.pushState('','','/ent')如果网页不存在的情况下可能导致404错误

开始的时候使用hash方式,上线使用history