Vue学习记录(Day.5)
2020-01-12 20:58
169 查看
VueCLI3创建项目和路由的相关知识
(webpack不在描述,后期集成在Vue项目中)
1.VueCLI3创建项目
2.路由的相关知识
2.1什么是路由
路由是网络工程里的一个术语,是通过互联的网络把信息从源地址传输到目的地址的活动。
前端路由:当页面中需要请求不同的路径内容时,交给服务器处理,服务器渲染好整个页面,并将该页面返回给客户端。
后端路由:改变url但是页面不进行整体的刷新。
2.2vue-router基本使用
路由用于设定访问路径,将路径和组件映射起来,在vue-router的单页面应用中页面的路径的改变就是组件的切换。
一:配置路由相关信息
[code]//配置路由相关的信息 //导入路由 import VueRouter from 'vue-router' import Vue from 'vue' //1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建路由对象 const routes = [ ] const router = new VueRouter({ //配置路径和组件的映射关系 routes }) //3.将router对象传入到Vue实例 export default router
二:使用vue-router
1.创建路由组件
[code]<template> <div> <h2>我是Home</h2> <p>我是Home内容</p> </div> </template> <script> export default{ name:"Home" } </script> <style> </style> <template> <div> <h2>我是About</h2> <p>我是About内容</p> </div> </template> <script> export default{ name:"About" } </script> <style> </style>
2.配置映射关系
[code]//配置路由相关的信息 //导入路由 import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home.vue' import About from '../components/About.vue' //1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) //2.创建路由对象 const routes = [ { path:'/home', component:Home }, { path:'/about', component:About } ] const router = new VueRouter({ //配置路径和组件的映射关系 routes }) //3.将router对象传入到Vue实例 export default router
3.使用路由
[code]<template> <div id="app"> <router-link to="home">首页</router-link> <router-link to="about">关于</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> <style> </style>
router-link补充:
1.tag:tag可以指定<router-link>之后渲染成什么组件
2.replace:replace不会留下history记录,所以指定replace的情况下,后退返回键不能返回到上一个页面中
3.active:当router-link对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称
2.3vue-router嵌套路由
2.4vue-router参数传递
2.5vue-router导航守卫A
2.6keep-alive
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- aardio学习记录-3.使用Vue+JSON实现aardio与HTML内容互动
- Vue.js学习记录
- vue基础学习记录(三)
- vue.js学习记录二
- Vue学习记录(1-element-ui)
- vue学习记录(数据绑定、class,style绑定)
- 【vue】vue组件化开发初体验-示例vue-loader-example学习记录
- vue-bootstrap学习记录(前端菜鸟)
- vue 学习记录
- vue-cli学习命令记录
- Vue学习记录—指令
- Vue学习记录
- vue学习记录(四)
- VUE+SSM 以VUE做项目前端,SSM做后端框架,难点在于数据的传输处理,下面我记录一下一个简单的登录退出功能的实现,如果有缺陷还请大佬指出,个人菜鸟 一个,正在学习当中,以此记录一下自己的学习
- vue 学习记录
- 记录学习进程新手学vue——todolist
- vue的学习记录-例题
- vue学习记录
- 3.VUE前端框架学习记录三:Vue组件化编码1
- Vue新手学习记录