Router_编程式路由

安装路由的依赖

Add.vue

<script setup></script><template><div><h1>Add</h1></div></template><style scoped></style>

Home.vue

<script setup></script><template><div><h1>Home</h1></div></template><style scoped></style>

List.vue

<script setup></script><template><div><h1>List</h1></div></template><style scoped></style>

Update.vue

<script setup></script><template><div><h1>Update</h1></div></template><style scoped></style>

router.js

// 导入创建路由的相关方法import Home from'../components/Home.vue'import List from'../components/List.vue'import Update from'../components/Update.vue'import Add from'../components/Add.vue';import{createRouter,createWebHashHistory}from'vue-router'const router=createRouter({history:createWebHashHistory(),routes:[{path:"/",component:Home},{path:"/home",component:Home},{path:"/list",component:List},{path:"/add",component:Add},{path:"/update",component:Update}]})export default router

main.js

import{createApp}from'vue'import App from'./App.vue'import router from'./routers/router.js'const app=createApp(App)app.use(router)app.mount('#app')

App.vue

<script setup>import{useRouter}from'vue-router'const router=useRouter()functionshowList(){router.push("/list")router.push({path:"/list"})}</script><template><div><!--声明式路由--><router-link to="/home">home页</router-link><br><router-link to="/list">list页</router-link><br><router-link to="/update">update页</router-link><br><router-link to="/add">add页</router-link><br><!--编程式路由--><button @click="showList()">list</button><hr><router-view></router-view></div></template><style scoped></style>

更改App.vue

<script setup>import{useRouter}from'vue-router'import{ref}from'vue'const router=useRouter()let myPath=ref("")functiongoMyPage(){router.push(myPath.value)}</script><template><div><!--声明式路由--><router-link to="/home">home页</router-link><br><router-link to="/list">list页</router-link><br><router-link to="/update">update页</router-link><br><router-link to="/add">add页</router-link><br><!--编程式路由--><button @click="goMyPage()">Go</button><input type="text"v-model="myPath"><hr><router-view></router-view></div></template><style scoped></style>