内容概括

• 认识路由
• vue- router基本使用
• vue-router嵌套路由
• vue-router参数传递
• vue-router导航卫守
• keep-alive

一.路由

• 路由映射表，是将内网的 IP 地址映射到 和唯一的 电脑mac 地址对应起来。
• 路由表的本质，就是一个映射表，决定了数据包的指向

1.前端渲染和后端渲染的区别

现在的开发是使用 js+html+css ，但是早期的时候，没有js这种代码。他是通过后端的代码，直接渲染完以后，再传到前端。也就是说他传到前端的，就已经html+css 了。

1. 后端渲染和后端路由：

路由地址和表之间的这种一一对应的关系，是由后端来完成的，这种路由方式称为后端路由。
后端路由是通过后端程序员自己的逻辑 java 或者php ，将数据嵌套在 html 网页之中。

前端渲染（使用了 ajax 以后，就可以通过 js 来访问数据库。)

SPA页面：

spa 单页面富应用

其实，在第一次往静态资源服务器里面，进行请求的时候，就已经把 html + css 的网页给都拿过来了，所以，你每点一次路由的时候，并没有往后端发送任何请求，只是把自己的界面给换了，这种路由，就叫做前端路由。

二.如何改变 url 后，页面不刷新

其中一种技术上通过更改 hash 改变 url ，这个时候，页面不刷新

location.hash='aaa'

三. 配置前端路由

import Vue from 'vue'

//导入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 任何插件，都要使用 vue.use（Router）的方法使用。
Vue.use(Router)


// 把 Router 实例导出。
export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

四.配置前端路由

import Vue from 'vue'
import Home from '../components/Home.vue'
import About from '../components/About.vue'

//导入路由
import Router from 'vue-router'


// 任何插件，都要使用 vue.use（Router）的方法使用。
Vue.use(Router)


// 把 Router 实例导出。
export default new Router({
    
    
  routes: [
    // {
    
    
    //   // path: '/',
    //   // name: 'HelloWorld',
    //   // component: HelloWorld
    // },
    {
    
    
      path: "/home",
      component: Home
    },
    {
    
    
      path: "/about",
      component: About
    }
  ]
})

认识两个标签：

<router-link to > 是用来指名路由地址的，而 router-view 是路由出口，即用来表示这个路由应该在什么地方显示。

<template>
  <div id="app">
    <!-- 相当于是一个 a 标签 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    
     <!-- 相当于在显示的地方占个位置 -->
    <router-view></router-view>
  </div>
</template>

五.配置默认路由

如果每次进入网页的时候，都要点击 首页 ，才能跳转到首页，很不方便，所以，应该通过配置路由，让他默认跳转到 首页

在路由里加上这么一个

{
    
    
      //打开的时候，默认重定向
      path: '',
      redirect: '/home' //重定向
    },

路由地址，在使用的时候，会有一个 # 号健，这是因为 默认使用的是 hash 的方法，我们可以把它改成 history 的方法。代码如下：

在配置路由实例的时候，再多传入一个参数：

六.更改 router-link 的相关属性

默认情况下 ，router-link 是以 a 标签的样式，也可以进行更换，换成 button 等标签。同时可以更改，当点击的时候，颜色的效果，具体代码如下、

<template>
  <div id="app">
    <!-- 相当于是一个 a 标签 -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
     
     
  name: 'App'
}
</script>

<style>
/* 点击的时候变颜色 */
.router-link-active{
     
     
  color: brown;
}
</style>

七. 动态路径参数（动态路由）

首先明确，什么是动态路由，动态路由就是根据每个点击的人的不同，动态的显示路由地址

具体实现，看代码：

1.先构建一个组件：User，把他注册到路由里，注意结构（使用 ：来表示）

{
    
    
      path: "/user/:userId",
      component: User
    },

2.然后在 APP 显示界面里面，用拼接的方法，让其动态的显示

<template>
  <div id="app">
    <!-- 相当于是一个 a 标签 -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about">关于</router-link>

    //动态路由的拼接，是从 data 里面获取数据的
    <router-link :to="'/user/'+userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>
/* 点击的时候变颜色 */
.router-link-active{
     
     
  color: brown;
}
</style>

3.在 视图层，让显示的路由，显示出来。

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过this.$route 访问当前路由：

<template>
  <div>
    <h1>我是用户界面</h1>
    <p>我是用户界面的内容，哈哈</p>

    <!-- 通过下边的 computed 的userId 方法,把路由里面的参数取出来 -->
    <h2>{
   
   {userId}}</h2>

    <!-- 也可以直接拿出来 -->
    <h3>{
   
   {$route.params.userId}}</h3>
  </div>
</template>

<script>
export default {
     
     
  name: "User",
  computed: {
     
     
    userId() {
     
     
      //  $route 就是拿到当前的处于活跃状态的路由
      return this.$route.params.userId;
    },
  },
};
</script>

<style  scoped>
</style>

4.注意：经过本人测试，路由总可以出现汉语的名字

5. 捕获所有的路由和404错误页面

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：
当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了History 模式，请确保正确配置你的服务器。

八. 路由的懒加载

当打包构建应用时，Javascript包会变成非常大，影响加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由访问的时候，才加载对应的组件，这样就更加的高效了。

代码： (很简单)

只需要路由实例中，模块引入的时候，将上边的写法改成下边的写法即可：

import About from '../components/About.vue'

const About=()=>import('../components/About.vue')

九.嵌套路由

路由的嵌套，是用来表示组件里面嵌套子组件的关系

注意。路由中的 / 这个到底要不要加，是有一定要求的，不是乱加的。

步骤：

• 创建对应的子组件，并在路由映射中配置对应的子路由。
• 路由组件中使用 <router-view>，标签

创建子组件

注意子组件的命名要提现出来父子关系。

在路由中引用组件，代码如下：

const HomeMessage =()=>import("../components/HomeMessage.vue")
const HomeNews =()=>import("../components/HomeNews.vue")

// 任何插件，都要使用 vue.use（Router）的方法使用。
Vue.use(Router)

// 把 Router 实例导出。
export default new Router({
    
    
//把更改hash 值得写法，更改为 history 的写法， 就没有了 #
  mode: 'history',
  routes: [
    {
    
    
      //打开的时候，默认重定向
      path: '',
      redirect: '/home' //重定向
    },
    {
    
    
      path: "/user/:userId",
      component: User
    },
    {
    
    
      path: "/home",
      component: Home,
      children:[
        {
    
    
          path:'',
          redirect:'news'
        },
        {
    
    
          path:'news',
          component:HomeNews
        },
        {
    
    
          path:'message',
          component:HomeMessage
        }
      ]
    },
    {
    
    
      path: "/about",
      component: About
    },]})

添加 <router-view>标签

注意此处的路由要写完整的路由地址：

<template>
  <div>
      <h2>我是Home，哈哈</h2>
      <p>我是内容，哈哈</p>

      <br>
      <router-link to="/home/news">新闻</router-link>
      <router-link to="/home/message">消息</router-link>
      <router-view></router-view>
  </div>
</template>

十. 全局的导航守卫

该功能的具体作用，是可以利用全局导航守卫，当切换不同的组件的时候，可以在路由上动态的显示组件的名字。

十一. vue-router-keep-alive

理解生命周期，代码如下：

<script>
export default {
    
    
  name: "Home",
  data() {
    
    
    return {
    
    };
  },

  // 创建的时候调用
  created() {
    
    
    console.log("created");
  },

  // 销毁的时候，调用
  destroyed() {
    
    
    console.log("destroyed");
  },
};
</script>

效果就是当界面发生跳转的时候，会显示不同的生命周期函数，调用对应的函数。

具体要实现的功能： 点完对应的网页以后，再返回来的时候，页面还是保存在刚刚原有的状态上。

直接在 路由展示的标签上加上 <keep-alive> 即可

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

十二. 路由传参

<router-link :to="{name:'/test',params: {id: id}}">跳转</router-link>

在子组件里获取

this.$route.params.id

十三. 编程式导航

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to="..."> 等同于调用 router.push(...)。

先创建一个路由

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

通过命名组件传参

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

上面代码和下面是一个意思。

router.push({
    
     name: 'user', params: {
    
     userId: 123 }})

router.go(n) 的用法

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)