[JavaScript知识库]Web前端vue必做笔记之一:路由基础-页面跳转

Web前端vue必做笔记之一:路由基础-页面跳转

首先我们一定要在main.js中引入router.js

//main.js中
import { createApp } from "vue";
import App from "./App.vue";
import router from './router.js'

const app = createApp(App)
app.use(router);
app.mount("#app");

<template>
     <div>
            <!-- 相当于a标签，可以进行跳转 -->
            <router-link to="/home">首页</router-link> |  
            <router-link to="/blog">博客</router-link>  
             
             <!-- 占位，切换home或者blog,它显示的组件方在这里 -->
            <router-view></router-view>
     </div>
</template>

<script>
export default {
    
}
</script>

//router.js中
import {createRouter, createWebHashHistory} from 'vue-router'
import Home from './components/Home'
import Blog from './components/Blog'
const router = createRouter({
    history:createWebHashHistory(),   //把路由设置为hash模式

    //配置路由
    router:[
          {
              path:'/', //路径
              component:Home     //跳转的组件
          },
          {
              path:'/blog',
              component:Blog
          }
    ] 
})

 export default router   //把路由暴露出去