路由 Router
安装
npm install vue-router@4
yarn add vue-router@4
一、配置路由,新建 \router\index.js 路由文件
import { createRouter, createWebHashHistory } from 'vue-router/dist/vue-router'; import HelloWorld from '../components/QuickStart/HelloWorld.vue'; import Edit from '../components/ElementTest/Edit.vue'; import BlogPost from '../components/BasicTest/BlogPost.vue'; import Login from '../views/login/Index.vue'; import GetTest from '../views/FetchTest/GetTest.vue'; const routes = [ { path: '/', component: Edit }, { path: '/BlogPost', name: 'BlogPost', component: BlogPost }, { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld }, { path: '/Login', name: 'Login', component: Login }, { path: '/GetTest', name: 'GetTest', component: GetTest }, ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router;
在main.js中使用路由
import router from './router/index' app.use(router) app.mount('#app')
二、模块中使用路由
路由组件的显示占位符放在 app.vue 中
<router-view></router-view>
路由链接,导航
<router-link to="/BlogPost">BlogPost</router-link>| <router-link to="HelloWorld">HelloWorld</router-link>
三、组件中使用路由
<script lang="ts" setup> import { useRouter, useRoute } from 'vue-router'; const router = useRouter(); const route = useRoute(); function gomodal() { router.push('/BlogPost'); } </script>