Vue笔记（六）vue-router

目录

路由

基本路由

嵌套（多级）路由

路由传参

命名路由

路由的params参数

路由的props配置

编程式路由导航

缓存路由组件

两个新的生命周期钩子

路由守卫

独享守卫（只有前置，后置用全局守卫）

组件内路由守卫

路由器的两种工作模式

---

vue-router是vue的一个插件库，专门用来实现单页Web应用（single page web application，SPA），SPA整个应用只有一个完整的页面，点击页面中的导航链接不会刷新页面，只会做页面的局部更新，数据需要通过AJAX请求获取。

路由：

一个路由（route）就是一组映射关系（key-value），key为路径，value可能是function或component，多个路由需要路由器（router）管理。

分类：

1.后端路由：value是function，用于处理客户端提交的请求。当服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

2.前端路由：value是component，用于展示页面内容。当浏览器的路径改变时，对应的组件就会显示。

安装与vue2配套的版本：npm i vue-router@3

应用vue-router：Vue.use(VueRouter)

main.js

// 引入Vue
import Vue from 'vue';
// 引入App组件
import App from './App.vue';
// 引入VueRouter
import VueRouter from 'vue-router';
// 引入路由器
import router from './router'
Vue.config.productionTip = false;
// 应用VueRouter
Vue.use(VueRouter);
new Vue({
    el:'#app',
    // 将App组件放入容器中
    render:h=>h(App),
    router,
})

基本路由：

新建文件：

 编写router配置项：index.js

// 此文件专门用于创建整个应用的路由器
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About.vue'
import Home from '../components/Home.vue'
// 创建并暴露一个router实例对象
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

App.vue

<template>
    <div>
        <div>Vue Router Demo</div>
        <div>
            <!-- 实现切换，active-class可配置高亮样式 -->
            <!-- router-link实质上还是a标签，所以给a标签写的样式也会应用到router-link -->
            <router-link to="/about">About</router-link>
            <router-link to="/home" active-class="active">Home</router-link>
        </div>
        <div>
            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
export default {
    name:'App',
}
</script>

路由组件Home.vue

<template>
  <h2>我是Home</h2>
</template>
<script>
export default {
    name:'Home',
}
</script>

路由组件About.vue

<template>
  <h2>我是About</h2>
</template>
<script>
export default {
    name:'About'
}
</script><