什么是vue-router，工作原理是什么

一、vue-router是什么

• 路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给服务器，最终返回给客户端
• 传统的页面应用，是用一些超链接来实现页面切换和跳转的。而vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

---

二、vue-router实现原理（模式）

2.1 Hash模式

vue-router默认hash模式，使用URL的hash来模拟一个完成URL，于是当URL改变时，页面不会重新加载

• hash(#)是URL的锚点，代表的是页面中的也个位置，单单改的是#后的部分，浏览器只会滚动搭到相应的位置，不会重新加载页面，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面
• 同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；
• 所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。
• hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。

2.2 History模式

在配置路由规则的时，加入mode:"history" 这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

2.3 使用路由模块来实现页面跳转

• 方式1：直接修改地址栏
• 方式2：this.$router.push(‘路由地址’)
• 方式3：<router-link to="路由地址"></router-link>

---

三、vue-router使用方式

1:下载 npm i vue-router -S
2:在main.js中引入 import VueRouter from ‘vue-router’;
3:安装插件Vue.use(VueRouter);
4:创建路由对象并配置路由规则 let router = new VueRouter({routes:[{path:’/home’,component:Home}]});
5:将其路由对象传递给Vue的实例，options中加入 router:router
6:在app.vue中留坑 <router-view></router-view>

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
    routes: [
        //一个个对象
        { path: '/home', component: Home }
    ]
});
//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

//app.vue留坑
<template>
  <div>
      <!-- 留坑，非常重要 -->
      <router-view></router-view>
  </div>
</template>
<script>
  export default {
      data(){
          return {}
      }
  }
</script>

---

四、vue-router参数传递

• 声明式导航 <router-link :to='...>
• 编程式导航router.push(....)

4.1用name传递参数

在路由文件router/index.js配置name属性

router:[
  {
  	path:'/',
  	name:'index',
  	component:Index
  }
]

模板里(src/App.vue)用$route.name来接收 比如:<p>{{ $route.name}}</p>

4.2 通过 标签中的to传参

基本语法：<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

1. 先在src/App.vue文件中 <router-link :to="{name:'hi1',params:{username:'jspang',id:'555'}}">Hi页面1</router-link>
2. 然后把src/router/index.js文件里给hi1配置的路由起个name,就叫hi1. {path:'/hi1',name:'hi1',component:Hi1}
3. 最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收

4.3 利用url传递参数----在配置文件里以冒号的形式设置参数。

在/src/router/index.js文件里配置路由

{
  path:'/params/:newsId/:newsTitle',
  component:Params
}

我们需要传递参数是newsId和newsTitle，所以我们在路由配置文件里制定了这两个值。
在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的newsId和newsTitle。

<template>
  <div>
     <h2>{{ msg }}</h2>
     <p>新闻ID：{{ $route.params.newsId}}</p>
     <p>新闻标题：{{ $route.params.newsTitle}}</p>
   </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

在App.vue文件里加入我们的标签。这时候我们可以直接利用url传值了

<router-link to="/params/198/jspang website is very good">params</router-link>

4.4 使用path来匹配路由，然后通过query来传递参数

<router-link :to="{ name:'Query',query: { queryId:  status }}" >
     router-link跳转Query
</router-link>

//路由配置
 {
   path: '/query',
   name: 'Query',
   component: Query
 }

//获取参数
this.$route.query.queryId

---

五、配置子路由

routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      children: [
        {path: '/h1', name: 'H1', component: H1},//子路由的<router-view>必须在HelloWorld.vue中出现
        {path: '/h2', name: 'H2', component: H2}
      ]
    }
  ]

---

六、$route和$router的区别

6.1 $route 是“路由信息对象”

包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。

• path：字符串，对应当前路由的路径，解析为绝对路径
• query：一个对象，表示URL查询参数。若无参数则为空对象
• hash:当前路由的hash值(无#)。入伍则空字符串
• fullpath：完全解析后的url，包含查询参数、hash的完全路径
• name：当前路径的名字

6.2 $router 是“路由实例”对象

即使用 new VueRouter创建的实例，包括了路由的跳转方法，钩子函数等。
-常见跳转方法

<button @click="goToMenu" class="btn btn-success">Let's order！</button>
.....
<script>
  export default{
    methods:{
      goToMenu(){
        this.$router.go(-1)//跳转到上一次浏览的页面
        this.$router.replace('/menu')//指定跳转的地址
        this.$router.replace({name:'menuLink'})//指定跳转路由的名字下
        this.$router.push('/menu')//通过push进行跳转
        this.$router.push({name:'menuLink'})//通过push进行跳转路由的名字下
      }
    }
  }
</script>

6.3$router.push和$router.replace的区别

• 使用push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。
• 使用replace方法不会向 history 添加新记录，而是替换掉当前的 history 记录，即当replace跳转到的网页后，‘后退’按钮不能查看之前的页面。