vue开发(三)vue-router
来源:互联网 发布:淘宝达人怎么申请直播 编辑:程序博客网 时间:2024/06/05 03:49
原文
路由概念
指向的意思,当用户点击页面上的home 按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射。
- route:一条路由,点击某一个按钮,页面显示某一份内容
- routes:n条路由组合起来的数组
- router:管理者,配置路由
vue-router本质
首先将组件和路由对应起来,然后在页面中把组件渲染出来
1. html的页面实现
涉及到两个标签
<router-link> <router-view>
- 就是定义页面中点击的部分
- 还有一个非常重要的属性 to, 它定义 点击之后,要到哪个路径下 , 如:
<router-link to="/home">Home</router-link>
- 就是点击后,显示内容的部分
2. js中配置路由
- 定义route:
一个对象,两部分组成,path: component. path 指路径,component 指的是组件。如:
{path:'/home', component: home}
- 组成routes
const routes = [ { path: '/home', component: Home }, { path: '/about', component: About }]
- 创建router对路由进行管理
由构造函数 new vueRouter() 创建,接受routes 参数。
const router = new VueRouter({ routes // short for routes: routes})
- 把router 实例注入到 vue 根实例中,就可以使用路由
const app = new Vue({ router}).$mount('#app')
执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js 中配置的路径{ path: ‘/home’, component: Home} path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 标签。所有的这些实现才是基于hash 实现的。
注:
render: h => h(App)
等价于
new Vue({ el: '#app', components: { App }});// 然后在页面中写入标记:<div id="app"> <app></app></div>
等价于
{ render: function(createElement) { return createElement(App); }}
阅读全文
0 0
- vue开发(三)vue-router
- vue项目开发实战(三)——vue-router
- vue-router(1)
- vue学习(四) vue-loader vue-router vue-cli
- vue-router
- vue-router
- vue-router
- vue-router
- Vue router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue-router
- vue开发(二)单文件组件开发
- linux vi编辑常用技巧
- Anaconda使用教程-Windows
- unity的LOD组件
- nodejs简易爬虫
- vue开发(三)vue-router
- 关于netty源码的分析
- JS实现继承的几种方式
- html.html
- 经典Java面试题分析--
- JSP中四种会话跟踪技术(四大作用域)
- SEGGER System View
- 圈圈套圈圈(3)
- ini操作