路由

路由（Router）

路由的默认路径

默认情况下，进入网站的首页，我们希望渲染首页的内容，所以在配置路由的时候，应该让路径默认跳转到首页

实现：只要多配置一个映射即可

const routes =[
    {
    	//重定向	
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component: Home
    },
    {
        path:'/about',
        component: About
    }
]

去除浏览器url中路径前的 ‘ # ’ （html5 history模式）

在配置路由和组件之间的应用关系时，设置mode为history

const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    mode: 'history'
})

router-link的补充

• tag

  tag可以指定之后渲染成什么组件，比如可以渲染成button、li

• replace

  replace不会留下history记录，所以指定replace的情况下，浏览器的后退键不能返回上一个页面

• active-class

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

通过代码进行跳转

一定要通过$router属性，不要通过history.push()等实现

App.vue文件

<template>
  <div id="app">
    <H2>我是App组件</H2>
    <!-- tag属性设置显示的模式 -->
    <!-- <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link> -->

    <!-- 通过代码跳转 -->
    <button @click="homeclick">首页</button>
    <button @click="aboutclick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    homeclick(){
      // 通过代码的方式修改路由 vue-router
      // push => pushState
      this.$router.push('/home')
      // this.$router.replace('/home')
      console.log('homeclick')
    },
    aboutclick(){
      this.$router.push('/about')
      // this.$router.replace('/about')
      console.log('about')
    }
  }
}
</script>

<style>
</style>

动态路由（重要）

一般通过动态拼接实现 （v-bind）

App.vue文件


<template>
  <div id="app">
    <H2>我是App组件</H2>
    <!-- tag属性设置显示的模式 -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">关于</router-link>
    <!-- <router-link to="/user" tag="button">用户</router-link> -->
    <!-- 动态绑定 -->
    <router-link :to="'/user/'+userId">用户id</router-link>    //通过v-bind动态绑定
    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      userId:'John'
    }
  }
}
</script>

<style>
</style>

输出：

http://localhost:8080/user/John

User组件获取userId的值

• this.$route从 routes 中动态获取当前正在活跃路由（活跃状态指当前正在显示的组件）
• params–参数的意思

User.vue文件

<template>
  <div>
      <h2>这里是用户界面</h2>
      <p>{{userId}}</p>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    userId(){
      return this.$route.params.userId
    }
  }
}
</script>

<style>

</style>

路由的懒加载

当打包构建应用时，JavaScript会变得非常大，影响也免得加载

如果我们能把不同路由对应的组件分割成不同的代码块，然后当被访问时才加载对应组件，这样就更加高效了

（简单理解就是，需要用到时再加载 ）

常用方法： 不直接导入

// 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')

路由的嵌套使用

新建Home组件的两个子组件 HomeNews.vue 和 HomeMessages.vue

实现目录 Home/news 和Home/messages

注意：路径设置一定要细心

• 路由配置（子组件 component ---------> children）

  // 配置路由相关信息
  import VueRouter from 'vue-router'
  import Vue from 'vue'
  
  // 懒加载的方式
  const Home = () => import('../components/Home')
  const News = () => import('../components/HomeNews')
  const Messages = () =>import('../components/HomeMessages')
  const About = () => import('../components/About')
  const User = () => import('../components/User')
  
  // 1.通过Vue.use（插件），安装插件
  Vue.use(VueRouter)
  
  // 2.创建VueRouter对象
  const routes =[
      {
          path:'/',
          redirect:'/home'
      },
      {
          path:'/home',
          component: Home,
  		
  	//Home的子组件路由配置
          children: [
              {
                  path: '/home/news',
                  component: News
              },
              {
                  path: '/home/messages',
                  component: Messages
              }
          ]
      },
      {
          path:'/about',
          component: About
      },
      {
          path: '/user/:userId',
          component: User
      }
  ]
  
  const router = new VueRouter({
      // 配置路由和组件之间的应用关系
      routes,
      mode: 'history'
  })
  // 3.将router对象传入到vue实例
  export default router
  

• 同时在Home.vue中引用

  <template>
    <div>
        <h2>战舰世界首页</h2>
        <router-link to="/home/news">新闻</router-link>
        <router-link to="/home/messages">消息</router-link>
        <router-view></router-view>
    </div>
  </template>
  
  <script>
  export default {
      name: "Home"
  }
  </script>
  
  <style>
  
  </style>
  

参数传递

• 传递参数的方式：

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

  • params的类型：
    • 配置路由的格式： router/:id
    • 传递的方式： 在path后面跟上对应的值
    • 传递后形成的路径： /router/data1/router/data2
  • query的类型：
    • 配置路由的格式：/router ，也就是普通配置
    • 传递的方式：对象使用query的key作为参数传递方式
    • 传递后形成的路径：/router?id=123/router?id=abc

  <router-link :to="{path: '/profile',query:{name:'Mcqueen'}}">档案</router-link>
  

  对于之前的写法

  <router-link to="/home" tag="button">首页</router-link>
  

  其实也可以写成

  <router-link :to={"/home" } tag="button">首页</router-link>
  

  如果不用传递参数一把用之前的写法。

导航守卫

就是是网页标签动态显示当前内容。

实现方法主要有两种：

1. 通过生命周期函数（created函数） 不常用，因为太繁琐，如果大量修改代码量太大
2. 监听路由跳转，全局导航守卫

• 方法一实现：

  <template>
    <div>
        <h2>关于</h2>
        <p>俾斯麦号战列舰（英文：KMS Bismarck battleship [1]  ），是20世纪30年代末期纳粹德国在第二次世界大战前于汉斯·布洛姆造船厂建造，以德国前首相俾斯麦名字命名的俾斯麦级战列舰首舰。
  俾斯麦号战列舰舰长241.55米，舰宽36米，最大吃水9.99米，标准排水量41637吨，满载排水量50300吨，最高航速30.12节，最大续航力8500海里。舰上装备8门380毫米主炮，12门150毫米副炮和36门机关炮，是二战时期著名的战列舰之一。
  俾斯麦号战列舰于1936年7月开工，1939年2月14日下水，1940年8月24日建成服役，是当时德国吨位最大、技术最先进的战列舰 [2]  。1941年5月26日，俾斯麦号遭到英国皇家方舟号航空母舰起飞的剑鱼攻击机的空袭，遭鱼雷击伤舵机后被英军以优势兵力击沉 [3]  。</p>
    </div>
  </template>
  
  <script>
  export default {
      name: "About",
      created(){
        document.title = '关于'
      }
  
  }
  </script>
  
  <style>
  
  </style>
  

  效果

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VwhHA9gV-1608216889684)(D:\LGT\MyFiles\web前端\vue\vue笔记\image-20201215111943321.png)]

• 方法二实现：（前置守卫，也是钩子它们都是一种回调）

  router.beforeEach((to,from,next) => {
      // 从from跳转到to
      document.title = to.matched[0].meta.title
      next()
  })
  

  matched[0] 意思是匹配第一个路由，不然在含有嵌套路由的界面会显示undefined

• 后置钩子（hook）

  router.afterEach()
  

keep-alive 遇见 vue-router

keep-alive可以使组件在切换路由再次返回原先组件时保持其之前的渲染状态，不会被重新刷新

• keep-alive是vue的一个内置组件，可以使被包含的组件保留状态，或避免重新渲染
  • 它有两个非常重要的属性
    • include - 字符串或正则表达式，只有匹配的组件会被缓存
    • exclude - 字符串或正则表达式，任何匹配的组件都会被缓存
• router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存。