vue --- 路由Vue-router

前端路由Vue-Router有两种模式，hash和history；

 hash 就是指 url 尾巴后的 # 号以及后面的字符，这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点，本身是用来做页面定位的。背后的原理是onhashchange事件，hash 值变化不会导致浏览器向服务器发出请求，但会触发 hashchange 事件，hash发生变化的url都会被浏览器记录下来，存放在浏览器的历史纪录中，浏览器的进后退也能对其进行控制，这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，常用来做单页应用标配。hash模式的好处是，虽然你是个单页面应用，但你可以刷新当前页。

history利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，应用于浏览器的历史记录栈，对切换历史状态的三个方法back、forward、go（对应浏览器的前进，后退，跳转操作），历史记录进行修改的功能。history模式如果刷新会重新请求服务器。

hash 模式和 history 模式都是利用浏览器自身的特性，Vue-Router 利用了这通过调用浏览器提供的接口来实现前端路由。

1.引入路由

下载直接引入项目：https://unpkg.com/vue-router@3.0.2/dist/vue-router.js

<script src="vue.js"></script>
<script src="vue-router.js"></script>

npm下载引入项目

npm install vue-router

如果使用vue-cli脚手架搭建安装时选择安装路由

选择y

下载完成后在入口文件main.js内使用

import Vue from 'vue'
import App from './App' //主组件
import router from 'vue-router'
Vue.use(router)

2.使用路由vue-router

vue路由分两种，声明式路由和编程式路由

声明式路由中主要有router-view，router-link，router对象组成；

<router-view></router-view>是组件展示的地方；

<router-link to='/home' tag='span'></router-link>控制路由跳转，to代表将要展示的组件，浏览器把router-link默认解析为a标签，tag可以更改解析后的标签，当点击的router-link匹配到相对应的组件后会生成router-link-active类名，我们可以控制这个类名的属性判断我们当前展示的组件名；

router对象控制路由规则，vue-cli脚手架中会在src下建立一个router文件夹，里面有个index.js文件用来书写路由规则，使用时需要先引入和使用vue-router和各个组件

import router from 'vue-router'
import Contentwrap from '@/components/contentwrap'//组件
import Index from '@/components/index'//组件
import My from '@/components/my'//组件

Vue.user(router); 

然后实例化对象，通过单词可以这样理解，对象中router是一个机制，相当于一个管理者，它来管理路由，routers是一组路由，把上面的每一条路由组合起来，形成一个数组

let router = new Router({
  routes: [
    {
      path: '/',//路径
      name:'home',
      redirect:"/index",//重定向
      component: Contentwrap,//匹配组件
      children:[//子路由
        {
          path: '/index',
          name:'index1', 
          component: Index,
        },
        {
          path: '/my',
          name:'my',//名字
          alias:'myself',//别名
          component: My,
        }
      ]
    }
  ]
})

routers中path代表路径，即浏览器上方域名后的pathname，name为这个路由的名字，有时候path可能会很长，通过一个名称来标识一个路由显得更方便一些，使用时可以这样

this.$router.push({name:'index1'})

它和this.$router.push('/index')是一样的，最终都会渲染Index模板；alias为这条路由的别名，使用方法和原先一样，如this.$router.push('/myself')，它渲染的还是My组件，只是另起了一个名字而已；

最后暴露出去，在入口文件main.js中引入

export default router

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

编程式路由主要利用$router对象，它常用的方法有三个；

1. this.$router.push('/my')，跳转到一个新的组件，
2. this.$router.replace('/')，路由组件替换
3. this.$router.go(-1)，路由回退-1，vue中最好不要用history.go(-1)

如果在组件中引入了路由规则，

import router from '../router/index.js'

那么在方法中可以直接使用router.push('/kind')；

即使在编程式路由中也需要定义路由规则；

 3.声明式路由传参

• 传参：

<router-link to="/my?userId=123" tag="span">我的</router-link>

url路径：http://localhost:8080/#/my?userId=123

接收参数：

this.$route.query.userId

• 传参：

<router-link :to="{name:'my',params:{userId:789}}" tag="span">我的</router-link>

url路径：http://localhost:8080/#/my

接收参数：this.$route.params.userId

 4.编程式路由传参

• 传参：

  this.$router.push({ path: '/my', query: {userId:123}})

  url路径：http://localhost:8080/#/my?userId=123

接收参数：

this.$route.query.userId

• 传参：

  this.$router.push("/my?userId="+456)

  url路径：http://localhost:8080/#/my?userId=456

接收参数：

this.$route.query.userId

• 传参：

  this.$router.push({ name: 'my', params: {userId:122 }})

  url路径：http://localhost:8080/#/my

接收参数：

this.$route.params.userId

前两种参数在url地址栏中可见，第三种url地址栏中不可见

注意：没有this.$router.push({ path: '/my', params: { userId:456 }})这种传参方式，这种方法会跳转页面，但params里的参数不会传递