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

路由组件Home.vue

路由组件About.vue

 

注意：

1.做项目时，一般组件通常放在components文件夹中，路由组件放在与它同级的pages文件夹中。

2.通过切换，被换走的路由组件，默认被销毁，需要时再去挂载。

3.每个组件都有自己的$route属性，里面存储着自己的路由信息。

4.整个应用只有一个router，可以通过组件的$router获取到。

嵌套（多级）路由：

配置路由规则，使用children配置项：

routes:[
    {
        path:'/about',
        component:About
    },
    {
        path:'/home',
        component:Home,
        children:[
            {
                // children的path一定不能写成"/children1"(只有根路径前加 "/")
                path:'children1',
                component:Children1
            },
            {
                path:'children2',
                component:Children2
            }
        ]
    }
]

跳转（要写完整路径）：

Children1

路由传参：

传递参数：

 Home 

 Home 

Home

接收参数：

$route.query.id
$route.query.title

命名路由：

可以简化路由的跳转

给路由命名：

{
    path:'/grandpa',
    component:Grandpa,
    children:[       
        {
            path:'father',
            component:Father,
            children:[       
                {
                    name:'son',
                    path:'smallest',
                    component:Son,
                }
            ]
        }
    ]
}

简化跳转：

跳转

跳转

跳转

路由的params参数：

配置路由，声明接收params参数：

{
    path:'/grandpa',
    component:Grandpa,
    children:[       
        {
            path:'father',
            component:Father,
            children:[       
                {
                    name:'son',
                    path:'smallest/:id/:title', //使用占位符声明接收params参数
                    component:Son,
                }
            ]
        }
    ]
}

传递参数：

跳转

跳转

注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置。

接收参数：

$route.params.id

$route.params.title

路由的props配置：

让路由组件更方便的收到参数

{
    name:'index',
    path:'/home/:id',
    component:Home,
    // 写法一：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
    props:{a:99}
    // 写法二：props为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
    props:true
    // 写法三：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    props(route){
        return{
            id:route.query.id,
            title:route.query.title
        }
    }
}

的replace属性：

可以控制路由跳转时操作浏览器历史记录的模式。浏览器的历史记录有两种写入方式：push和replace，push是追加历史记录，replace是替换当前记录（无法回退），路由跳转时默认为push。

开启replace模式：

News

编程式路由导航：

可以不借助实现路由跳转，让路由跳转更加灵活

//$router的两个API
this.$router.push({
    name:'exam',
    params:{
        id:xx,
        title:xx
    }
})
this.$router.replace({
    name:'exam',
    params:{
        id:xx,
        title:xx
    }
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //参数为正前进，为负后退

缓存路由组件：

让不展示的路由组件保持挂载，不被销毁（include中写组件名）。

两个新的生命周期钩子：

路由组件所独有的两个钩子，用于捕获路由组件的激活状态：

activated路由组件被激活时触发

deactivated路由组件失活时触发

路由守卫：

可以对路由进行权限控制，分为全局守卫、独享守卫、组件内守卫。

全局守卫：

// 全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school')==='hzy'){ //权限控制的规则
            document.title=to.meta.title||'河中医';
            next(); //放行
        }else{
            alert('无访问权限！');
        }
    }else{
        document.title=to.meta.title ||'河中医';
        next()
    }
})
// 全局后置守卫：初始化时执行，每次路由切换后执行
router.afterEach((to,from)=>{
    if(to.meta.title){
        document.title=to.meta.title //修改网页title
    }else{
        document.title='index'
    }
})

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

{
    path:'/about',
    component:About,
    meta:{title:'关于',isAuth:true},
    beforeEnter:(to,from,next)=>{
        if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
            if(localStorage.getItem('school')==='hzy'){ //权限控制的规则
                document.title=to.meta.title||'河中医';
                next(); //放行
            }else{
                alert('无访问权限！');
            }
        }else{
            document.title=to.meta.title ||'河中医';
            next()
        }
    }
}

组件内路由守卫：

// 进入守卫，通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
  // ...
},
// 进入守卫，通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
  // ...
}

路由器的两种工作模式：

对于一个URL来说，“#”及其后面的内容就是hash值，hash值不会包含在HTTP请求中，即hash值不会带给服务器。

hash模式：

1.地址中永远带着“#”。

2.若以后将地址通过第三方手机APP分享，若APP校验合格，则地址会被标记为不合法。

3.兼容性较好。

history模式：

1.地址干净美观。

2.兼容性略差。

3.应用部署上线时需要其它部门人员支持，解决刷新页面服务端404的问题。

（视频：B站尚硅谷）