vue @路径_Vue-Router 使用和原理简单实现

Vue Router 是 Vue.js 官方的路由管理器,可以让构建单页面应用变得易如反掌

单页面应用(Single Page Application,SPA)

应用只有一个完整的页面，它在加载页面时，不会加载全部页面，只加载一个首页的容器，其它页面的内容在首页容器某个位置，需要页面切换时只更新某个指定的容器中内容

• 单页面应用的核心之一是：更新视图而不重新请求页面

单页面应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容

但当url变化，都会造成页面的刷新，目前有两种方式实现：

• 一种方式是用hash实现路由
• 另一种方式是用history

Vue-Router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式

Vue-Router的使用

通过Vue-cli安装Vue项目时可以把Vue-Router一起安装到项目中，或者另外安装引入

Vue-Router 使用步骤

1、安装依赖

2、在Vue中使用 注册路由组件

3、定义路由规则 路由规则是一个数组

4、创建路由对象

5、在Vue实例创建时传入创建路由实例

new Vue 时传入的router是为了给Vue实例注入 router，router，router，route 这两个属性

• $route 存储当前的路由规则信息，路径、参数等信息
• $router 是提供一些操作路径的方法 push、replace、go 还能通过currentRoute拿到当前路由规则信息

6、在首页（主页面）使用显示路由组件，和使用显示跳转（不是必须，可以用编程式导航代替）

动态路由

在路由规则里 path后面跟上 :/参数名，就可以在url上传参数给路由对应的组件
还可以再路由规则中指定props: true，指定后url上面的参数会作为props传给组件

嵌套路由

当多个路由的组件都有相同的内容，可以将这些相同内容提取到公共的组件当中，在公共组件里面通过路由的方式（使用）显示不同的路由组件

编程式导航

除了用外，更多情况下是使用$router的方法来实现路由跳转

• push 方法 会记录本次历史
• replace 方法 不会记录本次历史 会替换历史记录
• go 方法 会以0为基准跳转到相对页面
  // 跳转 会记录本次历史 this.router.push(′/′)this.router.push('/') this.router.push(′/′)this.router.push({ name: 'Home' }) this.router.push(name:′Detail′,params:id:2)//跳转不会记录本次历史this.router.push({ name: 'Detail', params: { id: 2 }}) // 跳转 不会记录本次历史 this.router.push(name:′Detail′,params:id:2)//跳转不会记录本次历史this.router.replace('/login') // 按照当前历史进行跳转 负数是回退 正数是向前 this.$router.go(-2)

Hash模式和History模式 区别

两种方式都是，当路径法发生变化，不会向服务器发送请求，使用js监视路径的变化根据不同的地址渲染不同的内容
Hash模式

• url里面有#，#后面是路由地址
• 原理实现是基于锚点 和 onhashchange事件

History模式

• url里面没有#
• 原理实现是基于HTML5中History API
• history.pushState()
• history.replaceState()

History模式 服务端支持

History需要服务器支持，因为History没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，把除了静态资源外所有路由都重定向到根页面
在node中，可以使用 connect-history-api-fallback 来重定向到根页面

在nginx中，在配置文件中进行修改

一个简单Vue-Router实现

Vue-Router中有两种模式
Hash 模式

• URL 中 # 后面的内容作为路径地址
• 监听 hashchange 事件
• 根据当前路由地址找到对应组件重新渲染

History 模式

• 通过 history.pushState() 方法改变地址栏
• 监听 popstate 事件
• 根据当前路由地址找到对应组件重新渲染

使用自定义的Vue-Router

需要先在Vue中使用自定义的Vue-Router，注入到Vue实例中

自定义的VueRouer需要实现的功能

• Vue.use()会调用传入对象的静态install方法，需要在这里实现注入到Vue中，保存Vue实例给其他地方用
• install里面mixin混合时可以在Vue实例beforeCreate生命周期中，可以进行一些初始化init()
• constructor 构造器中要把传入的options保存起来
• 初始化init() 把路由规则数组转成对象方便获取；初始化组件；监听浏览器的历史前进后退事件
• 编码方式的路由跳转功能

install()

constructor()

init()

createRouteMap()

initComponents()

需要用编码的方式创建，这个方法用render函数来实现

initEvent()

两种模式对应了两个window的变化事件

routerPush()

页面跳转

作者：唯小南
链接： https:// juejin.cn/post/69037691 64184944648
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。