[JavaScript知识库]初步认识Vue-router(原理/跳转方法/配置)（一）

写在前面

? ? ? ? 往日不可留，来日犹可追。

? ? ? ? 是说话算数的小王~

Vue-router是干什么的？原理是什么？

????????Vue-router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用，vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

????????传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中， 则是路径之间的切换，也就是组件的切换。

????????路由模块的本质就是建立起 url 和页面之间的映射关系。

???????? “更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的 实现主要有两种方式：

????????1、利用 URL中的hash（“#”）

????????2、利用 History interface在HTML5中新增的方法

路由之间是怎么跳转的？有哪些方式？

????????1、<router-link to="需要跳转到页面的路径">

????????2、this.$router.push()跳转到指定的 url，并在 history 中添加记录，点击回退返回到上一个页 面

????????3、this.$router.replace()跳转到指定的 url，但是 history 中不会添加记录，点击回退到上上个 页面

????????4、this.$touter.go(n)向前或者后跳转 n 个页面，n 可以是正数也可以是负数

Vue-router 怎么配置路由?

????????在 vue 中配置路由分为 5 个步骤，分别是：

????????1、安装

npm install --save vue-router

????????2、引用

import VueRouter from 'vue-router'

????????3、配置路由文件

var router = new VueRouter({
 routes:[
 { 
    path:"/hello", 
    component:HelloWorld 
}, 
{ 
    path:"/wen", 
    component:HelloWen 
    new Vue({
     el: '#app',
     components: { App },
     router, 
    template: '<APP/>' 
})

????????4、视图加载的位置

????????默认 App.vue 文件中加<router-view></router-view>

????????5、跳转导航

? ? ? ? <router-link to="/hello">helloword</router-link>（渲染出来的是 a 标签>

写在最后

? ? ? ? 还是得让自己充实一点才好，多多学习，多多思考。