为什么要有hash 和history？对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变试图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了一下两种支持：1、hash - 即地址栏URL中的 # 符号（此hash不是密码学里的散列运算）比如这个URL：http：//www.abc.com/#/hello,hash的值为#/hello.它的特点在于：hash虽然出现在URL中...
在vue-router（一）中已经提到过，路由匹配的组件将会渲染到<router-view></router-view>中 而在渲染的组件中，同样也可以通过嵌套路由渲染组件。 <div id="app"><router-view></router-view> </div> const home = {template: '<div>this is home</div>' };const router = new VueRouter({routes: [{path: '/home', component: home}] }) 在App.vue中的<router-view>是最顶层的出口，用来渲染最高级路由匹配的组件，此时为home.vue...
1、认识路由vue-router 基本使用vue-router 嵌套路由vue-router 参数传递vue-router 导航守卫keep-alive2、什么是前端渲染，什么是后端渲染1）后端渲染jsp：java server page后端路由阶段：早期的网站开发，整个HTML页面是由服务器来渲染的服务器直接生产好对应的html页面，返回给客户端进行显示2）前后端分离阶段3）单页面富应用阶段 spa其实 SPA 最主要的特点就是在前后端分离的基础上加了一层前端路由也就是由前端来维护一套规则...
vue-router 路由 路由是一个网络工程里面的术语。 路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. 路由器提供了两种机制: 路由和转送. 路由是决定数据包从来源到目的地的路径. 转送将输入端的数据转移到合适的输出端. 路由中有一个非常重要的概念叫路由表 路由表本质上就是一个映射表, 决定了数据包的指向后端路由阶段 1、早期的网站开发整个HTML页面是由服务器来渲染的 2、服务器直接生产渲染好对应的HTM...
目录基础使用小剧场 基础使用vue-router是vue中的路由，使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。vue-router的官方文档：https://router.vuejs.org/zh/guide/ 在vue文件中，即通过<router-view></router-view>或者<router-view />来渲染路由匹配到的组件。 路由文件index.js中：{pat...
RouteConfig 的类型定义： interface RouteConfig = {path: string,component?: Component,name?: string, // 命名路由components?: { [name: string]: Component }, // 命名视图组件redirect?: string | Location | Function,props?: boolean | Object | Function,alias?: string | Array<string>,children?: Array<RouteConfig>, // 嵌套路由beforeEnter?: (to: Route, from: Route, next: Function) => void,meta?: any,// 2.6....
hash模式url路径中会出现#号字符 hash值不包括在http请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求 hash值的改变会触发hashchange事件history模式整个地址重新加载，可以保存历史记录，方便前进后退 依赖H5 API和后台配置，没有后台配置的化，页面刷新会出现404 location / {try_files $uri $uri/ /index.html }
修改vue-router的配置文件，默认位置router/index.jsimport Vue from vue import Router from vue-router/*** 重写路由的push方法* 解决，相同路由跳转时，报错* 添加，相同路由跳转时，触发watch (针对el-menu，仅限string方式传参，形如"view?id=5")*/// 保存原来的push函数 const routerPush = Router.prototype.push // 重写push函数 Router.prototype.push = function push(location) {// 这个if语句在跳转相同路径的时候，...
一、vue-router 配置代码 1、需要配置两部分一个是vue的配置， 2、二是模版中dom占位，不然不会生效， 3、这就需要一个组建都要写一次，路由根本其实是配置文件 4、配置一次就可以达到子组件共享状态，通过this.$router访问相关的属性Vue.use(VueRouter);const router = new VueRouter({base: process.env.BASE_URL,routes: routerConfig, });<router-view></router-view>二、react-router 配置代码 1、通过包裹在我们根组建外层一...
uni-app没有vue-router如果要使用vue-router可以使用 uni-simple-router uni-simple-router文档地址 https://hhyang.cn/安装 在uni-app项目根目录 执行 npm install uni-simple-router 进入根目录可以通过右键项目文件夹 在这里输入 cmd即可快速打开cmd 执行 npm install uni-simple-router安装即可 配置路由 新建router目录 在router目录下新建Index.js 引入 uni-simple-router的RouterMount createRouter import {RouterMount,c...
1 Webpack 1.1 什么是webpack1.2 前端模块化1.3 与其他打包工具frunt/gulp对比webpack的正常运行，必须依赖node环境，而npm是管理node依赖包2 main.js => render： new Vue({el:'#app',render :function(createElement) {//1.普通用法 createElement('标签’，{标签的属性]，[’'〕)return createElement('h2',{class:'box'},['Hello world', createElement('button',['按钮'])])//2.调用组件的用法return createElement(cpn)} ...