vue-router

改变url但是页面不刷新

1,通过hash改变，不会刷新

location.hash=''

2，通过history对象

history.pushState({},'','url')

这种方式其实利用了栈结构，push为入栈，要出栈，使用history.back()方法

3，通过history对象的replaceState()方法
这个方法的效果跟上面的方法的效果一模一样，但是它是无法返回的。

4，history.go()
go只能在pushState中使用，因为它是要在栈中跳的。
它的参数可正可负，如果是正的，那么就是向前走。如果是负的，那么就是往回走

history.back()==history.go(-1)
history.forward==histoey,go(1)

history.forward()向前走

认识vue-router

目前前端流行的三大框架，都有自己的路由实现
Angular的ngRouter
React的ReactRouter
Vue的vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用
官方网站：https://router.vuejs.org/zh/

vue-router是基于路由和组件的
路由用于设定访问路径，将路径和组件映射起来
在vue-router的单页面应用中，页面的路径的改变就是组件的切换

安装和使用vue-router

1，安装：
npm install vue-router
2，在模块化工程中使用它（因为是一个插件，所以可以通过vue.use()来安装路由功能）
2.1：导入路由对象，并且调用Vue.use(VueRouter)
2.2：创建路由实例，并且传入路由映射配置
2.3：在Vue实例中挂载创建的路由实例

3
3.1在src下创建目录router

在创建index.js

// 配置路由相关的信息
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//1，通过vue.use（插件）。安装插件
Vue.use(Router)
//2.创建路由对象
export default new Router({
  // 配置路由和组件之间的应用关系
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

//将对象传入到Vue实例中--导出

接着在main.js中使用：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

使用vue-router的步骤：
第一步：创建路由组件

第二步：配置路由映射：组件和路径映射关系

记得要导入：

第三步：使用路由：通过和
：该标签是一个vue-router中已经内置的组件，它会被渲染成一个标签
：该标签会根据当前的路径，动态渲染出不用的组件。
网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等会和处于同一个等级
在路由切换时，切换的是挂载的组件，其他内容不会发生改变
决定你的组件是什么时候显示的关键。
所以想要标签来识别各自的路径
在App.vue才能写标签

结果：

但是点击链接之后，还是不能跳转页面：

所以想要router-view来告诉组件应该渲染什么，怎么渲染。

路由的默认路径

这里还有一个不太好的实现，默认情况下，进入网站的首页，我们希望渲染首页的内容，但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以。
任何可以让路径默认跳转到首页，并且渲染首页组件呢？
非常简单：我们只需配置多一个映射就可以了

配置解析：
我们在routes中又配置了一个映射，
path配置的是根路径：/（加不加/都可以）
redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了

接着我们发现，路径的改变都是通过哈希算法：

带有井号。默认情况下，就是哈希模式。但是想要用html5的history，在配置路由的时候就说明：

效果：

route-link补充属性：
1，to——用于指定跳转的路径
2，tag——可以指定之后渲染成什么组件，比如如下会被渲染成一个元素，而不是

3，replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
4，active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类
但是通常不会修改类的属性，会直接使用默认的router-link-active

如果要改变这个类的名字，可以添加属性：active-class，后面接上名字就可以。

但是想要每一个被点击的都要添加这个属性，很麻烦
但是可以在路由里面修改这个类名：

这样不用在原来的代码中添加这个类了。

通过代码修改路径：

路由代码跳转

<template>
  <div id="app">
   
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    homeClick() {
      // 通过代码的方式修改路径，vue-router
      this.$router.push("/home");
      console.log("homeClick");
    },
    aboutClick() {
      this.$router.push("/about");
      console.log("aboutClick");
    },
  },
};
</script>

$router来自vue-router的源码。在所有的组件都加了router属性，调动这个属性的push方法。
但是我的页面会报错：

虽然可以正常运行，但是找了一下资料，
提示的是：避免到当前位置的冗余导航。也就是重复触发了同一个路由。
解决方法：只需要在router /index的页面里面 加入

结果：

没有再报错。

如果不想要用push，还可以用replace。