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')
  1. 在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>
  1. 开始使用
<router-link to='/musicList'></router-link>
// 或者
<router-link :to='{path:'/musicList'}'></router-link>
  1. 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
     	 }
	}
}
	
Logo

前往低代码交流专区

更多推荐