首先要明白一点,Vue-Router是做“跳转”功能,当然只是表面形式上的跳转,实质是DOM元素的卸载和挂载,页面并未跳转,但是效果是看到url
发生了变化,但是注意发生变化的是"#"哈希值后面的值,实质上并未跳转页面,但是路由內部是通过window.onhashchange实现监听
随着版本更替,history路由已经出现,它是用现代浏览器的新特性,实现
window.history.pushState(state, title, url)
// state:需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
// title:标题,基本没用,一般传 null
// url:设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的,否则会抛出错误。url可以是绝对路径,也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/,
//执行history.pushState(null, null, '/qq/'),则变成 https://www.baidu.com/qq/
window.history.replaceState(state, title, url)
// 与 pushState 基本相同,但她是修改当前历史记录,而 pushState 是创建新的历史记录
window.addEventListener("popstate", function() {
// 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发
});
window.history.back() // 后退
window.history.forward() // 前进
window.history.go(1) // 前进一步,-2为后退两步,window.history.lengthk可以查看当前历史堆栈中页面的数量
跳转的三要素
1. 跳转的内容
//定义路由组件 Foo 和 Bar
const Foo = { template: '<div>这是Foo组件哦</div>' }
const Bar = { template: '<div>这是Bar组件哦</div>' }
2. 将内容挂载到对应的请求资源路径上
就像超链接点击,其实是跳转路径,请求资源
//将路由挂载到对应的资源路径 就像超链接一样
const routes = [ //route其实是路线的名字 一个路由对应一个对象
{
path: '/', //访问路径
name: 'Home', //访问名称
redirect: '/foo'
},
{
path: '/foo', //访问路径
name: 'Foo', //访问名称
component: Foo
},
{
path: '/bar',
name: 'Bar',
component: Bar
}
]//这里是路由列表 一级路线
//router 才是路由的意思
const router = new VueRouter({
// [mode]可选参数 mode: 'history' 默认是'hash'
routes
})
路线 匹配是从上往下检索的,上面也说了,是监听页面hash值变化,通过遍历判断,匹配那个路由,并且由于routes是一个数组,肯定就有访问的先后顺序
- 每个路线,都表现为一个对象,对象有属性
property | desc |
---|---|
path | 资源组件挂载到的路径,访问到该路径,自然显示该组件 |
name | 资源路径的名称,考虑到路径path可能太长,不便开发成员编写 |
component | 资源组件,一般是一个组件option对象,(如果是命名视图,那就是对象包含各种组件) |
redirect | 重定向,就是自动跳转功能, |
alias | 访问到 alias的值时,就相当于访问到了path |
children | 该层级路线下的子路线 |
3. 跳转的"超链接"
//创建App
const vm = new Vue({
router,
el: '#app',
name: 'App',
template: `
<div id="app">
这是app组件
<div>
<router-link to="/foo">我要看Foo组件</router-link>
<router-link to="/bar">我要看Bar组件</router-link>
</div>
<router-view></router-view>
<!-- router-view 是路由显示的位置,切换路由的时候,这块内容动态的变化 -->
</div>
`
})