目录
url的hash和html5的history
history.pushState(data,title,url);
push就是栈,表示把url存到了栈里面
history.bake()可以把pushState的url按照先进后出的方式一一放出;等同于
history.go(-1)
history.replaceState(data,title,url);
replaceState的url不会存到内存中去,而是自动覆盖不会返回
histery.go(delta) 根据delta的值从而判断pushState的url值,并且确定跳转
到哪个页面
history.forward()等价于history.go(1)
路由框架的配置
//配置路由框架的相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'
//1.通过vue.use来安装插件
vue.use(VueRouter)
//2.创建路由对象
const routes = [
]
const router = new VueRouter({
routes
})
//3.将router传到Vue实例中
export defalut router
使用vue-router的步骤
1.创建路由的组件
2.配置路由映射:组件和路径映射关系
//引入两个vue组件
import Home from '组件路径'
import About from '组件路径'
//配置路由对象
const routes = [
{
//协议头 ://host/query
path: '/home'
component: Home
},
{
path: '/about'
component: About
},
]
3.使用路由 通过<router-link>和<router-view>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
//显示组件,进行占位
<router-view></router-view>
设定首页
//通过重定向
const routes = {
{
path: '',
redirect: '/home'
}
}
默认的mode是hash模式
mode:"history"
router-link的属性
to: 用于指定路径的跳转。
tag: 可以指定<router-link>渲染成什么组件。
replace: 不会留下history记录,所以指定replace的情况下,后退键就不会返回到上一次的页面。
active-class: <router-link>配置路由成功的话,就会给当前的元素配置一个默认的class,用该属性可以修改默认的class,如果休要修改的组件多的话,可以从路由配置的属性那添加linkActiveClass属性,来进行全局修改。
通过代码修改路由
//修改错误代码
VueRouter.prototype.push = function push(location)
this.$router.push('/about')
this.$router.replace('/home')
路由懒加载的三种方式
1.结合Vue的异步组件和Webpack的代码分析
const Home = resolve => {
require.ensure([
'组件文件的路径'
], () => {
resolve(require('组件文件的路径'))
})
};
2.AMD写法
const About = resolve => require(['组件文件的路径'], resolve);
3.在ES6中,我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割。
const Home = () => import('../components/Home.vue');
{
path: '/home',
redirect: Home
}
传递参数的方式
传递参数主要有两种类型: params和query
params的类型
配置路由格式:/router/id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123, /router/abc
qiery的类型
配置路由格式:/router,也就是普通配置
传递的方式:对象中使用query的key作为传递方式
传递后形成的路径:/router?id=123,/router?id=abc
导航守卫
//全局守卫
//前置守卫(guard)
router.beforeEach((to, from, next)) => {
document.title = to.matched[0].meta.title;
//可以跳转到下一个
next()
}
//后置钩子(hook)
router.afterEach((to, from, next) => {
})
keep-alive遇见vue-router
keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
include - 字符串或正则表达式,只有匹配的组件会被缓存
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
router-view也是一个组件,如果直接被包在keep-alive里面,所有路径匹配道的视图组件都会被缓存。
<keep-alive>
<router-view>
<!-- 所有路径匹配到的试图组件都会被缓存! -->
</router-view>
</keep-alive>