Vue路由——vue-router基础使用

安装

yarn add vue-router

导入路由

import VueRouter from 'vue-router'

使用路由插件

// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)

创建路由规则数组

const routes = [
  {
    path: "/find",
    component: Find
  },
  {
    path: "/my",
    component: My
  },
  {
    path: "/part",
    component: Part
  }
]

创建路由对象 - 传入规则

const router = new VueRouter({  routes:routes })

关联到vue实例

new Vue({
  router
})

使用：展示页面中的components换成router-view
router-view是路由出口

<router-view></router-view>

main.js中完整导入展示:

import Vue from 'vue'
import App from './App.vue'
import Find from '@/views/Find'
import My from '@/views/My'
import Part from '@/views/Part'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/find', component: Find },
  { path: '/my', component: My },
  { path: '/part', component: Part }
]

const router = new VueRouter({
  routes: routes
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue里怎么使用：

<template>
  <div>
    <div class="footer_wrap">
	<a href="#/find">发现音乐</a>
	<a href="#/find">发现音乐</a>
	<a href="#/find">发现音乐</a>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {};
</script>

<style scoped>
</style>