一、路由
安装: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.路由跳转
<router-link to="/route-a">跳转到路由A</router-link>
this.$router.push('/route-a')
2.获取当前路径
this.$route.path