精华内容
下载资源
问答
  • 参考:源码:vuejs/vue-router v2.2.1 - github文档vue-router 官方中文教程参考博客 :http://cnodejs.org/topic/58d680c903d476b42d34c72bVueRouter包括三个主要组成部分 ——VueRouterrouter-view和router-...

    参考:

    源码:vuejs/vue-router v2.2.1 - github

    文档:vue-router 官方中文教程

    参考博客 :http://cnodejs.org/topic/58d680c903d476b42d34c72b

    VueRouter包括三个主要组成部分 —— VueRouter、router-view和 router-link:

    VueRouter :路由器类,根据路由请求在路由视图中动态渲染选中的组件

    router-link :路由链接组件,声明用以提交路由请求的用户接口

    router-view:路由视图组件,负责动态渲染路由选中的组件

    前端路由直接找到与地址匹配的一个组件或者对象然后进行渲染,

    实现这一点主要是两种方式:

    1.Hash: 通过改变hash值

    2.History: 利用history对象新特性

    history模式需要服务端的配合,而hash模式不需要

    而在vue-router中,它提供mode参数来决定采用哪一种方式,选择流程如下:

    默认Hash-->如果浏览器支持History新特性改用History-->如果不在浏览器环境则使用abstract

    选好mode后创建history对象(HashHistory或HTML5History或AbstractHistory)

    可见最被青睐的是History模式,理由是: "#"太丑了。。。

    基本方法分析:

    Hash

    1.push()

    功能: 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图

    调用流程:

    1 $router.push() //显式调用方法

    2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录(window.location.hash= XXX)

    3 History.transitionTo() //开始更新

    4 History.updateRoute()  //更新路由

    5 {app._route= route}

    6 vm.render() //更新视图

    2.replace

    功能: 替换当前路由并更新视图,常用情况是地址栏直接输入新地址

    流程与push基本一致

    但流程2变为替换当前hash (window.location.replace= XXX)不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp

    3.监听地址栏变化

    在setupListeners中监听hash变化(window.onhashchange)并调用replace

    History

    1.push

    与hash模式类似,只是将window.hash改为history.pushState

    2.replace

    与hash模式类似,只是将window.replace改为history.replaceState

    3.监听地址变化

    在HTML5History的构造函数中监听popState(window.onpopstate)

    两种模式对比

    History模式的优点:

    1.History模式的地址栏更美观。。。

    2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL(可为不同的html文件),而hash只能是同一文档

    3.History模式的pushState、replaceState参数中的state可为js对象,能携带更多数据

    4.History模式的pushState、replaceState参数中的title能携带字符串数据(当然,部分浏览器,例如firefox不支持title,一般title设为null,不建议使用)

    缺点:

    对于单页面应用来说,理想的场景是仅仅在进入应用时加载页面(例如index.html),后续的网络操作靠ajax完成,

    而不会重新请求页面。

    但当用户直接在用户栏输入地址时则会重新请求,当地址带有参数时两者情况不一样

    Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值,所以请求的仍然是 xxx.com,没有问题

    History 例如:  xxx.com/id=5 这时请求的便是xxx.com/id=5,如后端没有配置对应id=XXX的路由处理,则会返回404错误。

    官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。同时这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback。

    展开全文
  • YDOOK:vue3:vue-cli4: vue-router 中文文档官方地址 © YDOOK JY Lin 1. 如下:可以直接点击访问: https://router.vuejs.org/zh/guide/

    YDOOK:vue3:vue-cli4: vue-router 中文文档官方地址

    © YDOOK JY Lin


    1. 如下:可以直接点击访问:

    https://router.vuejs.org/zh/guide/




    展开全文
  • vue-routerVue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现...
  • Vue Router安装和说明

    2019-08-09 14:05:53
    Vue Router Vue router中文文档 vue router githhub项目 npm下载 npm install vue-router --save

    Vue Router

    Vue router中文文档 

    vue router githhub项目

    npm下载

    npm install vue-router --save

     

    展开全文
  • 前言:新一季面试季,重新整理一些知识点; 本文详细说明自己对vue-router...文档vue-router 官方中文教程 参考博客 :http://cnodejs.org/topic/58d680c903d476b42d34c72b VueRouter包括三个主要组成...

    前言:新一季面试季,重新整理一些知识点;

    本文详细说明自己对vue-router原理的理解;

     

    参考:

    • 源码:vuejs/vue-router v2.2.1 - github
    • 文档:vue-router 官方中文教程
    • 参考博客 :http://cnodejs.org/topic/58d680c903d476b42d34c72b

     

     

    VueRouter包括三个主要组成部分 —— VueRouterrouter-view和 router-link

    • VueRouter :路由器类,根据路由请求在路由视图中动态渲染选中的组件
    • router-link :路由链接组件,声明用以提交路由请求的用户接口
    • router-view:路由视图组件,负责动态渲染路由选中的组件

    前端路由直接找到与地址匹配的一个组件或者对象然后进行渲染,

    实现这一点主要是两种方式:

    1.Hash: 通过改变hash值

    2.History: 利用history对象新特性

    history模式需要服务端的配合,而hash模式不需要

    而在vue-router中,它提供mode参数来决定采用哪一种方式,选择流程如下:

    默认Hash-->如果浏览器支持History新特性改用History-->如果不在浏览器环境则使用abstract

    选好mode后创建history对象(HashHistory或HTML5History或AbstractHistory)

    可见最被青睐的是History模式,理由是: "#"太丑了。。。

     

    基本方法分析:

    Hash

    1.push()

    功能: 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图

    调用流程:

    1 $router.push() //显式调用方法

    2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录(window.location.hash= XXX)

    3 History.transitionTo() //开始更新

    4 History.updateRoute()  //更新路由

    5 {app._route= route} 

    6 vm.render() //更新视图

     

    2.replace

    功能: 替换当前路由并更新视图,常用情况是地址栏直接输入新地址

    流程与push基本一致

    但流程2变为替换当前hash (window.location.replace= XXX)不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp

     

    3.监听地址栏变化

    在setupListeners中监听hash变化(window.onhashchange)并调用replace

     

    History

    1.push

    与hash模式类似,只是将window.hash改为history.pushState

    2.replace

    与hash模式类似,只是将window.replace改为history.replaceState

    3.监听地址变化

    在HTML5History的构造函数中监听popState(window.onpopstate)

     

    两种模式对比

    History模式的优点:

    1.History模式的地址栏更美观。。。

    2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL(可为不同的html文件),而hash只能是同一文档

    3.History模式的pushState、replaceState参数中的state可为js对象,能携带更多数据

    4.History模式的pushState、replaceState参数中的title能携带字符串数据(当然,部分浏览器,例如firefox不支持title,一般title设为null,不建议使用)

    缺点:

    对于单页面应用来说,理想的场景是仅仅在进入应用时加载页面(例如index.html),后续的网络操作靠ajax完成,

    而不会重新请求页面。

    但当用户直接在用户栏输入地址时则会重新请求,当地址带有参数时两者情况不一样

    Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值,所以请求的仍然是 xxx.com,没有问题

    History 例如:  xxx.com/id=5 这时请求的便是xxx.com/id=5,如后端没有配置对应id=XXX的路由处理,则会返回404错误。

    官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。同时这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果是用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时候返回 404,从而实现 fallback。

     

    转载于:https://www.cnblogs.com/janice-jia/p/8677106.html

    展开全文
  • Vue Router

    2019-05-01 20:11:00
    Vue Router中文文档 路由的基本使用 在 vue 的作用域中 注意: 使用别名一定要加 : <!--路由的入口 就是一个 a 标签--> <router-link to='/home'>主页</router-link> <!--入口使用 别名 --&...
  • vue 笔记之 vue-router

    2020-01-23 11:55:34
    中文文档 安装:npm install vue-router --save 所谓的路由就是一个key-value的映射关系,在vue路由中key指的是组件的 path,value指的是组件。 相关API说明 VueRouter() 用于创建路由器的构造函数。new VueRouter...
  • Vue Router学习笔记

    2019-01-07 15:26:00
    Vue Router中文文档 一、路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 第2步:声明(路由)组件  第3步:创建路由对象 ...
  • vue-router

    2017-07-24 15:08:00
    1 中文文档地址: https://router.vuejs.org/zh-cn/essentials/nested-routes.html 2 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 3 4 <p> 5 &l...
  • Vue11:router路由

    2020-05-26 14:54:09
    Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同...中文文档地址:vue-router文档。 安装 1、直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用.
  • vue-router实现分析

    2017-10-18 08:58:00
    文档vue-router 官方中文教程 初步 我们分别从不同的视角来看 vue-router。 从开发者角度来看,是这样的: var router = new VueRouter({ routes: [ {path: '/foo', component: {template: ...
  • Vue3中文文档 Vue3.0对比Vue2.x优势 框架内部做了大量的性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等。 新增的组合式API(即Composition API),更适合大型项目的编写方式。 对...
  • vue-router 实现分析

    2017-03-25 00:25:11
    vue-routerVue.js 官方的路由库,本着学习的目的,我对 vue-router 的源码进行了阅读和分析,分享出来给其他感兴趣的同学做个...文档vue-router 官方中文教程 初步 我们分别从不同的视角来看 vue-router。...
  • 在开始之前,默认你已经对vue的基础知识有了一定的了解了 这里的开发使用的是es6写的,如果你还未掌握es6的...先贴一波文档:  vue中文网:http://cn.vuejs.org/  vuex中文网:http://vuex.vuejs.org/zh-cn/  vue
  • 3) 中文文档: http://router.vuejs.org/zh-cn/ 4) 下载: npm install vue-router --save 相关 API 1) VueRouter(): 用于创建路由器的构建函数 new VueRouter({ // 多个配置项 }) 2) 路由配置 routes: [ { //
  • vue-router中文文档vue官方文档教程vue官方APIvuex官方文档vue实例的参数说明$route和$router的区别为什么vuex中必须要通过commit提交mutation?vue.js -- 60分钟组件快速入门(上篇)父组件改变props,子组件如果...
  • 中文文档:https://router.vuejs.org/zh/ Vue RouterVue.js官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转...
  • npm 安装:npm install -g @vue/cliElement 官网 npm 安装:npm i element-ui -Svue-axios apiaxios api vue-echarts github ECharts 的 API 文档(英文) ECharts 的 API 文档中文vue-ec...
  • Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web ...中文文档地址:vue-router文档。 转载于:https://www.cnblogs.com/xiangzhong/p/11352404.h...
  • 3)中文文档:http:router.vuejs.org/zh-cn 4)下载:npm install vue-router --save 路由链接用于单页应用 单页应用: (1)单页应用(SPA应用)——只有一个真实页面,但承载了很多功能页面。 (2)界面在不断变化...
  • vue-router中文文档,快速浏览一遍即可http://router.vuejs.org/zh-cn/Ⅱ. 整个demo所用到的技术栈 vueJS(2.0) vue-cli vue-resource es6Ⅲ. 所需构建工具 nodeJS Git 第一步:安装 OK,正题开始,首先保证nodeJS,...
  • 中文文档: http://router.vuejs.org/zh-cn/ 下载: npm install vue-router --save 5.1.2. 相关API 说明 VueRouter(): 用于创建路由器的构建函数 new VueRouter({ // 多个配置项 }) 路由配置 routes: [ { // 一般路由...
  • 管理平台 基于vue,element-ui,vue-router,axios,echarts的管理系统 [网上地址] 相关演示 构建设置 1,克隆项目 git clone 2,安装依赖 ...此刻中文文档 有关工作原理的详细说明,请查看的和。
  • vue.js+vue-router+sea.js构建SPA应用

    千次阅读 2017-03-20 15:06:45
    2016年火热的框架,一款渐进式的前端开发框架,因为是中国人开发的,所以中文文档写的也十分不错。整体来说比较简单易学,很好上手,但是深入比较有难度 2.vue-router vue全家桶的一员,为vue框架提供前端路由功能...
  • 本篇博文讲解如何使用Vue2.X+vue-router+VueX+...容易上手,具有完备的中文文档,学习曲线较平缓;日前新兴起的与传统APP形态不同的快应用,其前端技术栈使用的就是Vue的语法。Vue.js官方文档 vue-router的作用就是...
  • 印记中文文档 https://docschina.org react : 起步: react 路由: react-router 组件: ant design 状态: redux 异步: redux-saga 函数: ramda JS知识概览: ...开发插件:...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 127
精华内容 50
关键字:

router中文文档vue

vue 订阅