vue中使用vue-router

1. 新建vue项目，在src目录下新建router文件夹并在其中新建index.js，引入vue和vue-router

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)

1. 设计跳转链接

export default new Router({  routes:[    {      path: '/',      redirect: '/recommend'    },    {      path: '/recommend',      component: Recommend    },{      path: '/singer',      component: Singer    },{      path: '/search',      component: Search    },{      path: '/rank',      component: Rank    }  ]})

1. 在vue页面中使用

//main.jsimport router from './router'new Vue({  el: '#app',  render: h => h(App),  router})//app.vue<template>  <div id="app">    <router-view></router-view>  </div></template>

< router-view >< /router-view>负责嵌套路由，将路由中的组件嵌套至页面中，具体文档