1.npm install vue-router 或指定版本号npm install vue-router@4.0.0-beta.13
2.src目录下新建router文件夹 router文件夹下新建index.js
index.js:
import {createRouter,createWebHashHistory,createWebHistory} from "vue-router";
import a from '../views/a.vue' //引入文件
//创建路由对象
const routes = [{
path: "/",
redirect: '/a'
},
{
path: "/a",
component: a
},
];
const router = createRouter({
//哈希路由
history: createWebHashHistory(),
// history路由
// history: createWebHistory(),
routes,
})
export default router
3.main.js挂载:
import { createApp } from 'vue'
import router from './router/index'
import App from './App.vue'
const app = createApp(App);
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')
a.vue:
<template>name:{{ name }}</template>
<script>
import { ref, reactive } from "vue";
export default {
name: "refs",
props: {},
setup(props, ctx) {
let name = ref("张三疯");
return {
name,
};
},
};
</script>
vue3使用路由
最新推荐文章于 2024-05-31 16:08:57 发布