Vue3.0-route4.0使用
1.安装
vue-cli脚手架自带或者
npm install vue-router@4 --save
2.引用
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"; import Login from "@/views/login/Login.vue"; const routes: Array<RouteRecordRaw> = [ { path: "/login", name: "Login", component: Login } ]; const router = createRouter({ history: createWebHashHistory(process.env.NODE_ENV), routes }); export default router;
// 入口文件main
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; const app = createApp(App); app .use(router) .mount("#app");
3.动态添加路由
import router from "./router"; router.addRoute({ component: () => import("@/views/home/Home.vue"), name: "app" path: "/app" });
4.使用
import { useRouter, useRoute } from 'vue-router' export default { name: 'home', setup(props, context){ const router = useRouter() // 必须在setup的根作用域调用,在函数中调返回undefined 如需在其他页面使用 import router from "./router"; router = useRouter();
const route = useRoute() // 必须在setup的根作用域调用,在函数中调返回undefined cosnt id = route.query.id // 获取路由的query 参数 const goToPage = () => { router.push({ name: 'home' }) } } }
5.删除路由
import router from "@/router"; router.removeRoute("addRoute添加的路由name"); // 删除路由 指定name删除,删除后,所有子代路由都会删除
const removeRoute = router.addRoute(
{
component: () => import("@/views/home/Home.vue"),
name: "app"
path: "/app"
}
)
removeRoute(); // 删除添加的路由