Vue之路由（上）

目录

路由的简介 

vue-router 的理解

对 SPA 应用的理解

什么是路由？

路由分类

路由的基本使用

嵌套（多级）路由

路由的 query 参数

路由命名 

路由的 params 参数

路由的 props 配置

编程式路由导航

缓存路由组件

两个新的生命周期钩子

---

路由的简介 

vue-router 的理解

vue 的一个插件库，专门用来实现 SPA 应用

对 SPA 应用的理解

1. 单页面 Web 应用（single page web application，SPA）
2. 整个应用只有一个完整的页面
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4. 数据需要通过 ajax 请求获取

什么是路由？

1. 一个路由就是一组映射关系（key-value）
2. key 为路径，value 可能是 function 或 component

路由分类

后端路由：

      理解：value 是 function，用于处理客户端提交的请求

      工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

      理解：value 是 component，用于展示页面内容

     工作过程：当浏览器的路径改变时，对应的组件就会显示

当我们点击了班级管理就会触发路由，跳转到对应的路径，如果符合路由中的某些条件配置，就显示页面，不符合就不显示（实现针对不同权值的人看到的页面不同）

路由的基本使用

在 main.js 文件中进行如下操作

//引入 VueRouter
import VueRouter from 'vue-router'

// 引入路由器
import router from './router/index' 

//使用 VueRouter 
Vue.use(VueRouter)

const vm = new Vue({
  render: h => h(App),
  router   //创建 router
}).$mount('#app')

编写 router 配置项：

创建一个 router 文件夹，再在文件加中创建 index.js 文件，开始配置 router

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',    //配置路径
            component: About   //改路径要显示的组件
        },
        {
            path: '/home',
            component: Home
        }
    ]
})

在 App.vue 组件中

          <!-- 原始 html 中我们使用 a 标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

		  <!-- Vue 中借助 router-link 标签实现路由的切换 -->
		  <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

          <div class="panel-body">
						<!-- 指定组件的呈现位置 -->
          <router-view></router-view>
         

实现切换（active-class 可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>

指定展示位置

<router-view></router-view>

路由的几个注意点：

1. 路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹
2. 通过切换，"隐藏"了的路由组件，默认是被销毁的，需要的时候再去挂载
3. 每个组件都有自己的 $route 属性，里面存储着自己的路由信息
4. 整个应用只有一个 router，可以通过组件的 $router 属性获取到

嵌套（多级）路由

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

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children:[    //通过 children 配置子路由
                {
                    path: 'news',   //这里一定不要写 /news
                    component:News
                },
                {
                    path: 'message',  //这里一定不要写 /message
                    component:Message
                }
            ]
        }
    ]
})

跳转（要写完整路径）

<router-link to="/home/news">News</router-link>

注意：① 配置子路由记得要引入 ② 子路由 path 不加 / ，因为内部会自动加上

路由的 query 参数

<li v-for="m in messageList" :key="m.id">
  <!-- 跳转路由并携带 query 参数， to 的字符串写法 -->
  <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">message001</router-link>&nbsp;&nbsp; -->
  <!-- 跳转路由并携带query参数， to 的对象写法 -->
                <router-link :to="{
                    path: '/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }" 
                >
                {{m.title}}
                </router-link>
</li>

路由命名 

作用：可以简化路由的跳转

给路由命名：

export default new VueRouter({
    routes: [
        {
            path: '/home',
            component: Home,
            children:[
                {
                    name:'news'   //路由命名
                    path: 'news',
                    component:News
                },
                
            ]
        }
    ]
})

简化跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--方法一：简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>


<!--方法二：简化写法配合传递参数-->
<router-link
   :to="{
      name:'hello',
      query:{
         id:666,
         title:'你好'
   }
 }"

> 跳转</router-link>

路由的 params 参数

要把获取参数的方式从 query 变成 params 需要改以下几步

1. 在路由中配置路径的时候：改为 path: 'detail/:id/:title'

2.在获取数据的时候：<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
（这里需要注意，如果是 to 的对象写法，除了把 query 改为 params，获取路径只能用 name 方式，不能用 path）

3. 在对应的组件中显示数据的方式：
        <li>消息编号:{{$route.params.id}}</li>
        <li>消息标题:{{$route.params.title}}</li>

总结：只要你把路径配置成有占位符的方式（即 'detail/:id/:title' ），那么数据就会跑到 params 中

路由的 props 配置

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

{
     name:'detail',
     path: 'detail',
     component: Detail,

//props 的第一种写法，值为对象，该对象中的所有 key-value 都会以 props 的形式传递给 Detail 组件
// props:{a:1,b:'hello'}  //这种写法只能是固定值，不常用
//props 的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有 params 参数，以 props 的形式传给 Detail 组件
// props:true

// props 的第三种写法，值为函数
       props(route) {
          return {
                      id: route.query.id,
                      title: route.query.title,
                      a: '001',
                      b: '你好呀'
                            }
                   }
                            //解构赋值写法
                            // props({query}) {
                            //     return {id:query.id,title:query.title}
                            // }

                            //再简单一点的解构赋值(不太推荐，因为语义化不明显)
                            // props({ query: { id, title } }) {
                            //     return {id,title}
                            // }
                        }

注意：

谁接收数据就在谁身上配置 props

其中 path:'dedail/:id/:title ' 后面还是要跟占位符，不跟显示不出来

第三种写法相对较好

前两种是 params 写法，第三种为 query 写法，记得在获取或用到数据的地方要统一 用 query  

其中第三种写法 $route 可以有 $ 也可以没有，还可以通过解构赋值方法

<router-link> 的 replace 属性 

1. 作用：控制路由跳转时操作浏览器历史记录的模式

2. 浏览器的历史记录有两种写入方式：分别为 push 和 replace，push 是追加历史记录， replace 是替换当前记录。路由跳转时候默认为 push

3. 开启 replace 模式： <router-link replace ....>News</router-link>

编程式路由导航

作用：不借助 <router-link> 实现路由跳转，让路由跳转更加灵活（比如点击按钮实现跳转、延迟几秒实现跳转）

具体编码：

    methods: {
        pushShow(m){   //触发这个方法就跳转
          this.$router.push({   //push 方式跳转
               name:'detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
          })

        },
        replaceShow(m){
            this.$router.replace({   //replace 方式跳转
                 name:'detail',  
                    query:{
                        id:m.id,
                        title:m.title
                    }
            })
        }
    },

补充：

this.$router.forward()  //前进
this.$router.back()   //后退
this.$router.go() //可前进也可后退，即如果为正数 2 就是前进两步

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

缓存一个：

<keep-alive include="News">
	<router-view></router-view>
</keep-alive>

缓存多个路由组件：

<keep-alive :include="['News','Message']">
	<router-view></router-view>
</keep-alive>

总结：哪个组件要缓存，就把显示该组件位置的地方用 keep-alive 包裹，include 用来选择你要缓存的组件名 ,不写的话就是在该区域显示的所有信息都要缓存

两个新的生命周期钩子

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

具体名字：

•  activated 路由组件被激活时触发
•  deactived 路由组件失活时触发

写在要用的组件中：

<script>
export default {
    name:'News',
	data(){
		return {
			opacity:1
		}
	},
	activated(){
		console.log('New组件被激活了');
		this.timer = setInterval(()=>{
			console.log('@');
			this.opacity -= 0.01
			if(this.opacity <= 0) this.opacity = 1
		},16)
	},
	deactivated(){
		console.log('News组件失活了');
		clearInterval(this.timer)
	}
}
</script>

---

结束~