二、Vue3路由[router]

一、路由

安装：npm install vue-router

1.路由文件

注意：此文件已经放入router/index.js里面

解释：当访问https://xxxxxxx/#/experience就能访问到experience模板，history: createWebHashHistory()根vue2常用的路由格式类似

import {
    
     createRouter, createWebHashHistory } from "vue-router";

import experience from "../views/wechat_experience.vue";

const routes = [
  {
    
    
    path: '/experience',
    component: experience
  },
];

const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes,
});

export default router;

2.主文件导入

import {
    
     createApp } from 'vue'
import App from './App.vue'

import router from './router'
const app = createApp(App)

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

3.App.vue文件使用

解释：mode="hash",hash模式是指在URL中加上 # 符号来实现 URL 路由，这种模式下 URL 访问的所有内容都在页面的同一个框架之内。例如URL 格式为 http://example.com/#/path/to/route

<template>
  <div>
    <router-view mode="hash"></router-view>
  </div>
</template>
<script>

export default {
    
    

}
</script>
<style>

</style>

二、基础使用

1.路由跳转

1. <router-link to="/route-a">跳转到路由A</router-link>
2. this.$router.push('/route-a')

2.获取当前路径

this.$route.path