vue项目添加vue-router详细笔记

最新推荐文章于 2025-04-22 15:31:17 发布

穿林鸟

最新推荐文章于 2025-04-22 15:31:17 发布

阅读量4.7k

点赞数 4

分类专栏： vue uni-app js 文章标签： vue

本文链接：https://blog.csdn.net/huangyourself/article/details/116307385

版权

vue 同时被 3 个专栏收录

3 篇文章

订阅专栏

uni-app

2 篇文章

订阅专栏

2 篇文章

订阅专栏

本文详细介绍了如何从零开始在Vue项目中集成和配置Vue Router，包括安装、页面创建、路由定义和使用步骤，适合新手快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue添加路由vue-router

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

第一步安装路由vue-router

这里只考虑npm安装

npm install  vue-router

第二步：创建页面

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

<template>
	<div>这个是一个页面</div>
</template>

<script>
</script>

<style>
</style>

第三步：创建路由

点开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页面中添加

<template>
  <div id="app">
	<router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app',
  components: {
    
  },
  data () {
    return {}
  }
}
</script>

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