0
点赞
收藏
分享

微信扫一扫

Vue3配置路由

史值拥 2024-08-15 阅读 36

Vue3配置路由

  1. 安装vue-router

npm install vue-router

  1. 创建一个路由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

  1. 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');

  1. App.vue中添加路由组件:

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

  1. 使用路由:

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

举报

相关推荐

0 条评论