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.没有什么高大上,就是想写的小白一些,省得动脑,不喜勿喷。

Logo

前往低代码交流专区

更多推荐