URL的hash

URL的hash也就是锚点（#），本质上是改变window.location的href属性

我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新

location.href
"https://www.baidu.com/"

location.hash = '/home'
"/home"

location.href
"https://www.baidu.com/#/home"

HTML5的history模式：

pushStase()

该方法与location.hash类似

在 HTML 文档中，history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

history.pushState({}, '', 'home')
undefined

location.href
"https://www.baidu.com/home"

replaceState()

该方法在改变url后不可以前进后退

replaceState()方法使用state objects, title,和 URL 作为参数， 修改当前历史记录实体，如果你想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

history.replaceState({}, '', '/show')
undefined
location.href
"http://io.neepu.edu.cn/show"

back()

back()方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。

history.back()
undefined

location.href
"https://www.baidu.com/"

go()

go()方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。

向后移动一页（等价于调用back()）：

window.history.go(-1)

向前移动一页，就像调用了forward()：

window.history.go(1)

back()

back()方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。

forward()

在会话历史中向前移动一页。它与使用delta参数为1时调用 history.go(delta)的效果相同。

Vue-router

基本配置

JS配置

如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

Vue.use(VueRouter);

定义 (路由) 组件。

const Foo = { template: '
foo
' }
const Bar = { template: '
bar
' }

可以从其他文件 import 进来

import home from "./components/home";
import show from "./components/show";

定义路由
每个路由应该映射一个组件。 其中"component" 可以是
通过 Vue.extend() 创建的组件构造器，
或者，只是一个组件配置对象。
我们晚点再讨论嵌套路由。

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

创建 router 实例，然后传 routes 配置
你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

创建和挂载根实例。
记得要通过 router 配置参数注入路由，
从而让整个应用都有路由功能

const app = new Vue({
  router
}).$mount('#app')

设置默认主页

在设置routes时，将默认组件添加为主页

redirect是重定向的意思，也就是把默认页面重定向到home主页

{
    path: '/',
    redirect: home//组件名称
},

设置HTML5的history模式

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

需要在定义的router里加一个mode属性，该属性的值为history

const router = new VueRouter({
  routes,
  mode: "history"
})

将router-link更改成其他标签

router默认生成的是锚点(a)标签

使用tag属性可更改成其它标签

home
show

设置router-link标签点击不可前进回退

默认的方式相当于history的pushState()方法

我们如果更改为replaceState()方法，不能够前进和回退

只需要向router-link里添加replace属性

home
show

设置选中属性

router-link被选中时会默认添加两个属性

• router-link-exact-active
• router-link-active

第一个是路由嵌套的属性，后面会继续深入

第二个是默认选中的属性，我们只需要在组件中设置该属性即可

同时，我们也可使用active-class来修改默认属性

只需要在router-link中添加这个属性并赋值即可，这个方法也并不常用

通过代码方式跳转

在组件中也可以不用router-link的方式来实现路由跳转

因为本质上就是history实现的路由跳转，所以可以在方法中实现，但是一定不要绕过vue-touter

HTML：

home
show

JS：

methods: {
    toHome() {
      this.$router.push('/home');
    },
    toShow() {
      this.$router.push('/show');
    }
}

如果想要实现路由跳转不可前进后退，那么只需使用replace属性即可