Java教程

路由 导航守卫(基础重点笔记)

本文主要是介绍路由 导航守卫(基础重点笔记),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一. 安装router

二. 在模块化中使用它

1.导入路由对象 import     form,并且调用Vue.use(VueRouter)安装,调用Vue.use安装插件前需引入Vue

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 1.通过Vue.use安装插件
Vue.use(VueRouter);

2.创建路由实例,并且传入路由映射配置(导出router)

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    components: about
  }
]
// 2.创建VueRouter对象
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes
})// 3.将router对象传入到Vue实例
export default router

3.在Vue实例中挂载创建的路由实例(导入router)

import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

二.使用vue-router的步骤

第一步:创建路由组件

第二步: 配置路由映射:组件和路径映射关系

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    components: about
  }
]

第三步:  使用路由:通过<router-link>和<router-view>(放在哪个位置)

三. 默认路径就是首页

1.多配置一个映射就可以了

  { 
    path: '',
    redirect: 'home' //重定向首页的组件
   },

2. 默认hash为#号网址,改为不带#号的加一句 mode:"history"

3.<router-link>一些属性

to:指定hash

tag:指定<router-link>渲染成什么组件

replace:不会留下history记录,不能前进后退

active-class:当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称

四. 第二种跳转方式(可实行js代码)

用监听事件来绑定如button,在实例化router里写methods在调用方法,this.$router = router

<template>
  <div id="app">  
    <button @click= "homeClick">首页</button>
    <button @click= "aboutClick">分页</button>
    <button @click= "userClick">用户</button>
    <button @click= "profileClick">个人档案</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'lisi',
    };
  },
  methods: {
    homeClick(){
      this.$router.push('/home')
    },
    aboutClick(){
      this.$router.replace("/about")
    },
    userClick(){
      this.$router.replace('/user/' + this.userId)
    },
    profileClick(){
      this.$router.replace({
        path: '/profile',
        query: {
          name: 'why',
          age: '18',
          height: 180
        }
      })
    }
  }
}
</script>

1.push 跟 replace区别 

   push = pushState(可前进后退)

   replace = replaceState(不可前进后退)

2.$router 跟 $route区别

    $router为VueRouter实例,导航页面需要使用.$router.push方法

    $route为当前route跳转对象里面可以获取name,path,query,params等

五. 动态路由

1.创建一个组件

2.在router里引入组件,实例化,搭建映射表 导出

const routes = [
  { 
    path: '',
    redirect: 'home' //重定向
   },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:aaa', //不确定,动态
    component: User
  }
]
// 2.创建VueRouter对象
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
})

3.在App.vue里渲染

 <router-link :to ="'/user/' + userId" tag = "button" replace>用户</router-link>
 <router-view></router-view>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'zhangsan',
    };
  },
  methods: {
    homeClick(){
      this.$router.push('/home')
    },
    aboutClick(){
      this.$router.replace("/about")
    }
  }
}
</script>

4.展示(在组件里用computed调用$route(活跃)params.userId)获得用户的id

<template>
  <div>
    <h2>用于目录</h2>
    <h2>用户页面</h2>
    <h2>{{$router.params.aaa}}</h2>
  </div>
</template>

<script>
export default {
  name: 'User',
};
</script>

六. 打包解析

1. npm run build (打包)

以app开头的是自己写的业务代码

manifest开头的是底层支持

vendor开头的是第三方提供商

2.懒加载,不会出现加载空白

 把import   form ‘’改成 cosnt   =()=>(‘’) 

// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')

七.嵌套路由

第一步:创建对应的子组件,并且在路由映射中配置对应的子路由

const routes = [
  { 
    path: '',
    redirect: 'home' //重定向
   },
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        redirect: 'new'
      }
      ,{
        path: 'new',
        component: HomeNew
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userId',
    component: User
  }
]
// 2.创建VueRouter对象
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
})

第二步: 在组件内部使用<router-view>标签

七传递参数的方式

传递参数主要有两种类型:params和query

params类型

配置路由格式:/router/:id

传递的方式:在path后跟上对应的值

传递后形成的路劲:/router/123,  /router/abc

网址构成:协议:服务器端口:路劲:query:片段

query的类型:

配置路由格式:/router 普通配置

传递的方式:对象中使用query的可以作为传递方式

传递后形成的路径: /router?id = 123,/router? id = abc

八.导航守卫

路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。

1.生命周期

create(){}   创建就回调

mounted(){}  模版挂载在dome时回调

updated(){}  更新的时候回调

activated() { } 活跃

destroyed() {} 销毁

2.前置钩子跟后置钩子的区别

  前置钩子:beforeEach需要调用next()执行,在跳转之前执行

router.beforeEach((to, from, next) => {

   next()
 });

后置钩子: afterEach不需要调用next()执行,跳转之后执行

 router.afterEach((to, from, next) => {
 });

3.使用全局导航守卫

先给路由映射配置元数据 meta:{title: ‘’},

在通过来统一执行

router.beforeEach((to, from, next) => {
   /* must call `next` */
   document.title = to.matched[0].meta.title;
   console.log(to);
   next()
 });

4.路由导航守卫(注意是Enter)

  {
    path: '/about',
    component: About,
    meta: {
      title: '分页'
    },
    beforeEnter: (to, from, next) => {
      /* must call `next` */
      console.log(111111);
      next()
    }
  },

5.keep-allive 缓存不会销毁

keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

    <keep-alive>
      <router-view></router-view>
    </keep-alive>

1.只有在keep-allive渲染<router-view/>的情况下生命函数才起作用

2.keep-alive有两个非常重要的属性

        include 只有匹配的组件会被缓存

        exclude 匹配组件不缓存,清除缓存重新创建

这篇关于路由 导航守卫(基础重点笔记)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!