vue-router

59 阅读1分钟

路由基础使用
作用::vue-router是Vue官方的路由管理器,是一个用来实现SPA的vue插件。
安装:npm install vue-router@4
使用步骤:
1、路由配置

    import { createRouter, createWebHashHistory,             createWebHistory } from "vue-router";
    import Login from '../views/Login.vue'
    import { useUserStore } from "../store/userStore";
    const routes = [
     {
     path: "/",
     name: "login",
     component: Login
    },
    {
        path:"/home",
        component:()=>import('../views/Home.vue'),
       
    },
     {
     path: "/register/:city/:code",
     name: "register",
     component: () =>
     import( "../views/Register.vue"),
     },
    ];
    const router = createRouter({
    history: createWebHashHistory(),
    routes
 })
 export default router;

2、主文件引入

   import App from './App.vue'
    import {createPinia} from 'pinia'
    const pinia = createPinia()

    createApp(App).use(router).mount('#app')

3、组件使用

    <template>	
<router-link to="/">登录</router-link>	
<router-link to="/register">注册</router-link>	
<router-view></router-view>	
</template>	

<script setup>	
import { ref, reactive } from 'vue';	

</script>	

<style scoped>	

</style>