VueRouter 相关信息

VueRouter 是Vue.js官方路由插件，与Vue.js深度集成，用于构建单页面应用。构建的单页面是基于路由和组件，路由设定访问路径，将路径与组件进行映射。VueRouter有两中模式 ：hash 和 history ，默认是hash模式。

原理：更新视图不会重新请求页面

hash 和 history 区别：

hash: url中有# ，#和#后面的都是hash，发送http请求后，不会在http中显示#及#后面的

           window.location.hash读取

           不需要服务器配置

           url 中有# 可能不够美观

            兼容所有浏览器，包括旧版IE 

           工作原理：浏览器的hash 部分（window.location.hash）发生变化时，不会触发页面的重新加载。VueRouter 监听hash 的变化并更新视图。

history：没有#，有两个新方法 replaceState()  pushState()      可对浏览器历史记录栈进行修改

     popState事件监听到状态变更

        需要服务器配置来返回应用的HTML文件。因为在刷新页面或直接访问嵌套路由时，服务器需要返回应用的 HTML 文件。

        url 更符号用户直觉且美观

        仅支持现代浏览器

        工作原理： history 模式使用 history.pushState 和 history.replaceState 方法来操作浏览器的历史记录和地址栏。ueRouter 监听这些变化并更新视图。

Vue Router 提供的 $router.push 和 $router.replace 方法，这些方法分别对应 history.pushState 和 history.replaceState。

history.pushState(state, title, url)
 

        添加新记录后，浏览器地址栏立刻显示 localhost:8080/page1，但并不会跳转到 page1，甚至也不会检查page1是否存在，它只是成为浏览历史中的最新记录。切换到其他页面 再点浏览器的回退 会回到page1

VueRouter的守卫：

       全局守卫 beforeEach 

        后置守卫 afterEach 

       路由独享守卫 beforeEnter 

         全局解析守卫 beforeResolve

VueRouter的钩子函数：

全局 beforeEach

路由独享 beforeEnter

组件内 beforeRouterEnter   beforeRouterUpdate  beforeRouterLeave

路由传参的方式：

this.$router.push({path:'',query:{}})   接收参数：this.$route.query

this.$router.push({name:'',params:{}}) 接收参数：this.$route.params

<router-link :to="{path:'',query:{}}"  />

<router-link :to="{name:'',params:{}}"  />

路由跳转方式：

this.$router.push({path:'',query:{}})   会在history中添加记录，点击回退 返回上一页面

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

this.$router.replace()    不会在history中添加记录，点击回退 返回上上页面

this.$router.go(n)    当n 为正数 向前跳转，为负数 向后跳转

<router-link to="" />

编程式导航使用的方法：

路由跳转：this.$router.push()

路由替换：this.$router.replace()

后退：this.$router.back()

前进：this.$router.forward()

$route 和 $router 区别：

$route 路由信息对象  path query params  fullPath hash name等

        接收参数this.$route.query    this.$route.params

$router  VueRouter的实例 含有很多属性和子对象 如history对象

           this.$router.push()

配置路由：

安装路由  

npm install--save Vue-Router

引入

import VueRouter from "vue-router"

Vue.use(VueRouter)

配置路由文件

//设置什么路径对应什么组件

const routes = [

{path:"/login",component:Login},

{path:"/home",component:Home},

]

// 实例化路由对象

const router = new VueRoute({

routes,

})

// 把路由对象挂载到Vue的根实例

new Vue({

router,

render:h=>h(App)

}).$mount('#app')

放置路由出口  App.vue文件中  <router-view />

跳转导航 <router-link to="" />

  

路由常用属性：

path 跳转参数

name 命名路由

component 路径对应的组件

children 子路由的配置参数

redirect 重定向路由

active-class

active-class 是VueRouter 中 <router-link >组件的属性，选中样式的切换

引发问题：

        由于 to="/"  引起，active-class 选择样式时根据路由中的路径去匹配，然后 显示，

        例如在my页面中，路由为localhost:8080/#/my，那么to="/” 和to="/my"都可以匹 配到，都会激活选中样式

解决：

        1、在router-link 中写入 exact 首页

        2、在路由中加入重定向 首页 { path: '/', redirect: '/home' }