1.什么是前端路由:
一.前端路由管理所有的url映射及数据的传递,
显示数据时不会进行页面的刷新
用户体验来说会有相当大的提升。
二.详细步骤(搭建):
一、通过脚手架创建vue项目
二、运行命令:npm install vue-router --save
查看package.json文件的dependencies属性是否添加vue-router
三、在src下新增文件:router
1.创建js文件:index.js(配置路由信息)
2.导入vue-router:import vueRouter from 'vue-router'
导入vue:import Vue from 'vue'
3.通过Vue.use(插件)方法,安装插件
Vue.use(vueRouter)
4.创建路由对象
const router = new vueRouter({
routes:[]
})
5.将路由对象传入vue实例
export default router;
6.在main.js导入
import router from './vuerouter/index'
7.在vue实例中进行使用
new Vue({
router,
render: h => h(App),
}).$mount('#app')
三、使用:
一、在components文件夹下创建路由组件
1、创建home组件,展示内容:我是home页面(添加div)
2、创建me组