路由基础使用
作用::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>