18.0 vue3 vue-router的配置
2023-09-11 14:22:28 时间
上一篇:
17.0 vue3 Suspense的用法_十一月的萧邦-CSDN博客
本篇来介绍有关vue3中 vue-router的使用,官网地址:Vue Router
1.创建vue3项目(这点就不再详细说了)
2.安装vue-router
使用命令:
npm install vue-router@4
如下:
3.在src文件夹下创建一个文件夹 名称为router,下面创建一个index.js,如下
index.js写入如下代码
import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home/Home')
},
{
path: '/about',
name: 'About',
component: () => import('@/views/About/About')
}
]
const router = createRouter({
history: createWebHashHistory(), //hash
// history: createWebHistory(), //history
routes
})
export default router
4.在main.js中进行配置
import {
createApp
} from 'vue'
import App from './App.vue'
import router from "@/router";
createApp(App).use(router).mount('#app')
// const app = createApp(App); //创建实例对象
// app.use(router)
// app.mount("#app") //挂载
5.找到App.vue,写入router-view
6. 测试可否跳转:Home.vue
<template>
<div>
我是首页
<router-link :to="{path:'/about'}">关于(path跳转)</router-link>
<router-link :to="{name:'About'}">关于(name跳转)</router-link>
</div>
</template>
<script>
export default {
name: "Home"
}
</script>
<style scoped>
</style>
点击任何一个,可以跳转到About关于页面就代表成功!
下一篇:
相关文章
- Vue3 getters打印结果是Proxy对象,怎么获取其中的值?
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
- vue3: 用el-dialog展示component(vue@3.0.5 / element-plus@1.0.1-beta.20)
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- vue3快速入门-Teleport传送(瞬移组件)
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- vue3 - 关闭eslint提示参数必须定义类型
- vue3 - 报错 ESLint: Component name "index" should always be multi-word.(vue/multi-word-component-names)
- Vue2.js迁移到Vue3.js的API变化
- SpringBoot学习笔记(八)——JWT、(Vue3、Axios、Vue-Router、TypeScript实现授权与验证示例)
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue(二)vue 指令及用法举例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue2和vue3有哪些区别和不同1
- vue3快速入门-Teleport传送(瞬移组件)
- 掌握Vue3模板语法,助你轻松实现高效Web开发
- Vue:第一个vue-cli项目
- 【Vue3+TS】Axios拦截器封装及跨域 [cors] 解决方案