vue3内对vue-router4的基本使用

最新推荐文章于 2024-04-04 16:07:29 发布

寄相思予代码

最新推荐文章于 2024-04-04 16:07:29 发布

阅读量157

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_72503508/article/details/129983274

版权

1. 安装 vue-router，默认安装的就是 4版本

yarn add vue-router

npm i vue-router

2. 在根路径上新建文件夹 router并在里面新建 index.js 文件，编码：

import {createRouter,createWebHistory,} from 'vue-router'

const router = createRotuer({

// 路由模式：createWebHistory() 不带 #号； createWebHashHistory() 带 #号
     histroy: createWebHistory(),
     routes:[
        {
           path: '/home',
            component: () => import('../pages/Home.vue') 
        },
        {
           path: '/login',
            component: () => import('../pages/Login.vue') 
        }
    ]
})

export default router

3. 在 main.js 内挂载

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

4. 在 App.js 中使用

<template>
  <!-- 路由出口 -->
  <router-view></router-view>
</template>

5. 页面使用 route 与 router

<script>
import { useRoute, useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.path)
    console.log(route.fullPath)

    const router = useRouter()
    const login = () => {
      router.push('/home')
    }
  },
}
</script>