1、版本需要用4.x
npm install --save vue-router@4
2、
配置路由
router.js
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
const routes = [
{
path: '/test',
component: () => import('../test/Test.vue'),
},
]
const router = createRouter({
// 采用hash 模式
history: createWebHashHistory(),
// 采用 history 模式
// history: createWebHistory(),
routes, //使用上方定义的路由配置
});
export default router
3 引入
main.js
import router from './router'
const app = createApp(App);
app.config.productionTip = false;
app.use(router)
app.mount('#app')
4、使用
import { useRoute, useRouter } from 'vue-router'
export default {
setup () {
const route = useRoute()
const router = useRouter()
return {}
},
}
引入的useRoute
,useRouter
相当于vue2的 this.$route()
,this.$router()
感觉还是vue2使用起来方便