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>