vue项目添加vue

2023-09-06 01:48| 来源: 网络整理| 查看: 265

vue添加路由vue-router

近期在学习vue中发现官方文档中如何添加路由写的太模糊了，很难理解，然后各种找资料各种度娘才弄明白，所以这里做个笔记方便自己查询。

第一步安装路由vue-router

这里只考虑npm安装

npm install vue-router 第二步：创建页面

比如我们在src文件夹下新建一个文件夹page用于放置页面然后新建home.vue和about.vue页面页面先用最简单的内容即可，如下：

这个是一个页面第三步：创建路由

点开main.js文件第一步，引用路由：

import VueRouter from 'vue-router' Vue.use(VueRouter)

第二步，还是在main.js文件中引用页面：

import home from './page/home.vue' import product from './page/about.vue'

第三步，还是在main.js文件中注册路由router path代表浏览器地址中的http://localhost:8080/#后的路径，“/”代表首页 ,component后面即是我们引入进来的页面，这样就建立了路由对应关系。

const router=new VueRouter({ routes:[ {path:"/",component:home}, {path:"/about",component:about} ] })

然后再vue中注册router

new Vue({ render: h => h(App), router }).$mount('#app') 第四步：使用

在App.vue页面中添加

export default { name: 'app', components: { }, data () { return {} } }

npm run dev跑项目起来看效果吧 PS.没有什么高大上，就是想写的小白一些，省得动脑，不喜勿喷。

【本文地址】

公司简介

联系我们