Vue3配置路由

Vue3配置路由

1. 安装vue-router

npm install vue-router

2. 创建一个路由index.js:

import { createRouter,createWebHistory} from "vue-router";// 引入Vue组件
import Page from '../components/page.vue';
import PriView from '../components/PriView.vue';// 定义路由
const routes= [{path: '/',component: Page,title: "/"},{path: '/pricy',component: PriView,title: '/pricy',},
]const router = createRouter({history: createWebHistory(),routes
})//router.afterEach((to, from) => {
//   var body = document.getElementById("body");
//   if(to.path == "/privacy"){
//     body.style["background-color"] = "white";
//   }else{
//     body.style["background-color"] = "#52167f";
//   }
//   window.scrollTo(0, 0)
// })export default router

3. 在main.js中添加路由：

import { createApp } from 'vue'
import './style.css'
//import "./config/rem";
import App from './App.vue'
import router from './router/index.js';
const app = createApp(App);
app.use(router);
app.mount('#app');

4. 在App.vue中添加路由组件：

<template><router-view />
</template>

5. 使用路由：

<div><router-link to="/pricy">Privacy policy</router-link></div>