学海无涯

导航

路由 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>

  

 

 

  

posted on 2023-03-02 15:09  宁静致远.  阅读(20)  评论(0编辑  收藏  举报