vue3.0中vue-router路由的创建及使用

1. 下载vue-router,一定要注意版本！
   npm install vue-router@/next --save
   使用vuex 统一也是要安装最新版本
   npm install --save vuex@next -D
2. src目录下创建router文件夹，router文件夹下创建index.js
   vue3.0下需要引入createRouter, createWebHistory 模块去创建路由
   createWebHistory 使用history模式

import { createRouter, createWebHistory } from 'vue-router'
import Home from  '../views/home'
// import MusicList from '../views/musicList'

const  routes = [
	// 注意这里使用路由path:'/'，Home, 如果你在app.vue  已经加载了首页，要删除app.vue中的组件，不然会重复加载  
    {
        path:'/',
        component:Home
    },
    {
        path: '/musicList',
        component: ()=> import('../views/musicList/index')
    }
]
const routerHistory = createWebHistory()
const routers = createRouter({
    history: routerHistory,
    routes: routes
})
export default routers

3. 在main.js 中使用router

import { createApp } from 'vue'
import App from './App.vue'

import router from "./router"

const app = createApp(App)
app.use(router)
app.mount('#app')

或者链式调用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

4. 在App.vue 中引入

<template>
  <router-view />
</template>
<script>


export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  font-family: '微软雅黑';
  box-sizing: border-box;
}
</style>

5. 开始使用

<router-link to='/musicList'></router-link>
// 或者
<router-link :to='{path:'/musicList'}'></router-link>

6. setup里面获取不到this，路由提供了两个方法useRouter和useRoute来替代原来的api

import { useRouter, useRoute } from "vue-router"
export default {
	setup(){
	//router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，
	//例如history对象;经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。
		const router =useRouter() //==>this.$router
	// route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等
      	const route=useRoute()//this.$route
      	const goRouter = () => {
        	router.push("/about");
      	}
      	return{
          goRouter
     	 }
	}
}