vue-router内容简介

目录

 

url的hash和html5的history

路由框架的配置

使用vue-router的步骤

设定首页

router-link的属性

通过代码修改路由

路由懒加载的三种方式

传递参数的方式

导航守卫

keep-alive遇见vue-router

---

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>