如何使用router实现vue单页面切换

第一步：在创建的项目目录下安装路由

$ cnpm install vue-router -S

第二步：创建router.js

//引入插件
import Router from ‘vue-router’
import Vue from 'vue'
//引入组件
import Home from './pages/Home'
import Star from './pages/Star'
import Sort from './pages/Sort'
//使用插件
Vue.use(Router)
//建立路由表
const routes=[
    {path:'/home',component:Home},
    {path:'/star',component:Star},
    {path:'/sort',component:Sort}
]
//创建对象
const router = new Router({routes，mode:'history'})
//导出对象
export default router

第三步：在main.js中

import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from './router'
Vue.config.productionTip = false
//配置路由:在Vue实例中添加：router
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

第四步：在App.vue中

html部分

      <nav class="tabs">
      <li v-for="item in tabs" :key="item.id" 
      :class="{active:item.id===selected}"
      //添加点击事件
      @click="selectAction(item)">
        {{item.title}}
      </li>
    </nav>
    //在这里展示路由页面
    <keep-alive><router-view/></keep-alive>

js部分

 data() {
    return {
      selected:'',
      tabs: [
        //配置路径
        { path: "/home", id: "home", title: "推荐" },
        { path: "/star", id: "star", title: "歌手" },
        { path: "/sort", id: "sort", title: "排行榜" }
      ]
    };
  },
  methods:{
    selectAction(item){
      this.selected=item.id;
      //切换路由
      this.$router.push(item.path)
    }
  }

最后，把相关的组件写好，就可以实现点击切换啦