vue3引入并使用router4.0的方法

最新推荐文章于 2024-07-18 10:24:18 发布

star_evan

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量92

点赞数 1

分类专栏： vue3.0学习与项目开发文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/m0_51691013/article/details/118712965

版权

5 篇文章 0 订阅

订阅专栏

首先用vite2构建好项目，

npm init @vitejs/app
//这里之后给项目起名字，构建项目
cd '你起的项目名'
//进入项目文件夹下
npm i //安装原始依赖

//如果要运行项目
npm run dev

项目目录

npm i vue-router@4

这时候我们检查好依赖npm list

在这里插入图片描述
可以看到router4已经成功安装

进入main.js文件

import {createRouter,createWebHashHistory} from 'vue-router'
// 导出的内容是一个个模块 必须有大括号,即使只引入了一个

接下来

// 声明三个路由
const Home=import('./components/home.vue')
const About=import('./components/about.vue')
const Product=import('./components/product.vue')

这里这些组件还没有创建，我们来创建一下（Helloworld组件可以删掉了)

在components文件夹下定义三个简单的组件

回到main.js
我们把三个路由包装到routes里

const routes=[
{path:'/',component:Home},{path:'/about',component:About},{ path:'/product',component:Product}
]
//这样routes就包含了几个路径的信息

然后进行构建

const router=createRouter({
    history:createWebHashHistory(),
    routes, //这里是定义的路由
})

之后use这个router就行了，之前的代码是 createApp(App).mount('#app') 中间加个 use就行

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

然后来到App.vue，可以把Helloworld组件标签删掉了
模板里的内容
这里router-link 和a标签作用差不多，可以用来转到路由, to的是路径就是你定义的routes里的路径了

<router-view></router-view>

这个标签就是用来存放路由的内容的随着路径的变化，这里标签会显示对应的内容

顺便再加一个样式

<style scoped>
a{
  margin: 10px;
}
</style>

然后我们输入指令npm run dev跑一下
Home
Product
关于就不演示了

关注